Я расскажу о том, как можно кастомизировать маркеры Google Map используя DOM, чтобы все выглядело так, как мы хотим. Более того, вы увидите интересные примеры в связке с Symfony2 PHP Framework
Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://devowl.org/
9. Подключение Google Maps API
В тэг <head> основного шаблона поместить:
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
В тэг <body> где нужна карта размещаем:
<div id="map_canvas"></div>
10.
11. Ограничения по использованию
В случае если дневной трафик
переваливает за 25000 показов,
подключать карту нужно будет с API_KEY
через Google APIs Console. Тогда Google
Map API будет для вас платным.
12. map.js
Создаем свой локальный map.js файл и в
нём будем писать логику работы с картой.
Его так же подключаем в <head>, только
после подключения Google Map API.
var g = google.maps;
13. Инициализация карты в div и
создание маркера
map = new g.Map(document.getElementById("map_canvas"), mapOptions);
17. RichMarker
Класс RichMarker расширяется от
OverlayView и позволяет создавать
маркер не просто картинкой, а HTMLкодом, но объявляется так же просто как
и обычный маркер.
Вот мы и добрались до DOM.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
18. Создание маркера с HTML
Функция drawOBJMarker вызывается
функцией поиска и передает туда
объект, который требуется отобразить
на карте:
19. Вывод на карту RichMarker-ов
Сейчас я
совершил поиск
по тэгу
“monument”.
Появилось три
кружочка.
25. Поле изображения в сущности
маркера объекта
Конфигурация бандла VichUploaderBundle
26. Изображения обрабатывает
LiipImagineBundle
В процессе отрисовки маркеров
существует несколько размеров одной
и той же картинки для поиска и для
увеличенной после нажатия на маркер
объекта.
LiipImagine создаёт миниатюры, следит
чтобы картинка вписывалась в нужные
размеры.
29. Если вы новичок в Symfony,
можете получить представление
на сайте видео-уроков:
https://knpuniversity.com
Это поможет вам лучше понимать
структуру Symfony Framework