Google map markers with Symfony2

10,805 views

Published on

Я расскажу о том, как можно кастомизировать маркеры Google Map используя DOM, чтобы все выглядело так, как мы хотим. Более того, вы увидите интересные примеры в связке с Symfony2 PHP Framework

Презентация подготовлена по материалам прошедшего 19 ноября витебского фронтенд-митапа: http://devowl.org/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
10,805
On SlideShare
0
From Embeds
0
Number of Embeds
9,913
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Google map markers with Symfony2

  1. 1. Symfony2 + Google Map и немного Rich Marker
  2. 2. Что будем использовать? Composer Symfony2 Liip/Imagine http://getcomposer.org/ http://symfony.com/ https://github.com/liip/LiipImagineBundle Google Map API Select2 JS https://developers.google.com/maps/ http://ivaynberg.github.io/select2/ RichMarker для Google Maps v3 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html и многое другое...
  3. 3. PHPStorm IDE
  4. 4. http://getcomposer.org Творим!
  5. 5. Конфигурация зависимостей в https://packagist.org composer.json
  6. 6. Установка Symfony В окне терминала PHPStorm пишем следующее: curl -s https://getcomposer.org/installer | php php composer.phar install cp app/config/parameters.yml.dist app/config/parameters.yml nano app/config/parameters.yml php app/check.php php app/console doctrine:schema:create php app/console assetic:dump
  7. 7. Структура файлов Symfony
  8. 8. Подключение Google Maps API В тэг <head> основного шаблона поместить: <script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> В тэг <body> где нужна карта размещаем: <div id="map_canvas"></div>
  9. 9. Ограничения по использованию В случае если дневной трафик переваливает за 25000 показов, подключать карту нужно будет с API_KEY через Google APIs Console. Тогда Google Map API будет для вас платным.
  10. 10. map.js Создаем свой локальный map.js файл и в нём будем писать логику работы с картой. Его так же подключаем в <head>, только после подключения Google Map API. var g = google.maps;
  11. 11. Инициализация карты в div и создание маркера map = new g.Map(document.getElementById("map_canvas"), mapOptions);
  12. 12. mapOptions var mapOptions = { draggableCursor: 'auto', draggingCursor: 'move', disableDoubleClickZoom: true, panControl: false, zoomControl: true, zoomControlOptions: { style: g.ZoomControlStyle.LARGE, position: g.ControlPosition.LEFT_CENTER }, scaleControl: true, scaleControlOptions: { position: g.ControlPosition.LEFT_BOTTOM }, streetViewControl: false, overviewMapControl: false, center: new g.LatLng(48.850258199721495, 2.362060546875), zoom: 6, mapTypeControlOptions: { mapTypeIds: [g.MapTypeId.SATELLITE, 'map_style'], style: g.MapTypeControlStyle.HORIZONTAL_BAR, position: g.ControlPosition.BOTTOM_LEFT } };
  13. 13. Обработчики событий
  14. 14. RichMarker Класс RichMarker расширяется от OverlayView и позволяет создавать маркер не просто картинкой, а HTMLкодом, но объявляется так же просто как и обычный маркер. Вот мы и добрались до DOM. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
  15. 15. Создание маркера с HTML Функция drawOBJMarker вызывается функцией поиска и передает туда объект, который требуется отобразить на карте:
  16. 16. Вывод на карту RichMarker-ов Сейчас я совершил поиск по тэгу “monument”. Появилось три кружочка.
  17. 17. map.css
  18. 18. OBJFormType.php
  19. 19. Сущность объекта маркера
  20. 20. Поле изображения в сущности маркера объекта Конфигурация бандла VichUploaderBundle
  21. 21. Изображения обрабатывает LiipImagineBundle В процессе отрисовки маркеров существует несколько размеров одной и той же картинки для поиска и для увеличенной после нажатия на маркер объекта. LiipImagine создаёт миниатюры, следит чтобы картинка вписывалась в нужные размеры.
  22. 22. Конфигурация liip_imagine app/config.yml
  23. 23. Если вы новичок в Symfony, можете получить представление на сайте видео-уроков: https://knpuniversity.com Это поможет вам лучше понимать структуру Symfony Framework

×