Your SlideShare is downloading. ×
0
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Google map markers with Symfony2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google map markers with Symfony2

10,377

Published on

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

Я расскажу о том, как можно кастомизировать маркеры 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,377
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Symfony2 + Google Map и немного Rich Marker
  • 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. PHPStorm IDE
  • 4. http://getcomposer.org Творим!
  • 5. Конфигурация зависимостей в https://packagist.org composer.json
  • 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. Структура файлов Symfony
  • 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. Ограничения по использованию В случае если дневной трафик переваливает за 25000 показов, подключать карту нужно будет с API_KEY через Google APIs Console. Тогда Google Map API будет для вас платным.
  • 10. map.js Создаем свой локальный map.js файл и в нём будем писать логику работы с картой. Его так же подключаем в <head>, только после подключения Google Map API. var g = google.maps;
  • 11. Инициализация карты в div и создание маркера map = new g.Map(document.getElementById("map_canvas"), mapOptions);
  • 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. Обработчики событий
  • 14. RichMarker Класс RichMarker расширяется от OverlayView и позволяет создавать маркер не просто картинкой, а HTMLкодом, но объявляется так же просто как и обычный маркер. Вот мы и добрались до DOM. http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
  • 15. Создание маркера с HTML Функция drawOBJMarker вызывается функцией поиска и передает туда объект, который требуется отобразить на карте:
  • 16. Вывод на карту RichMarker-ов Сейчас я совершил поиск по тэгу “monument”. Появилось три кружочка.
  • 17. map.css
  • 18. OBJFormType.php
  • 19. Сущность объекта маркера
  • 20. Поле изображения в сущности маркера объекта Конфигурация бандла VichUploaderBundle
  • 21. Изображения обрабатывает LiipImagineBundle В процессе отрисовки маркеров существует несколько размеров одной и той же картинки для поиска и для увеличенной после нажатия на маркер объекта. LiipImagine создаёт миниатюры, следит чтобы картинка вписывалась в нужные размеры.
  • 22. Конфигурация liip_imagine app/config.yml
  • 23. Если вы новичок в Symfony, можете получить представление на сайте видео-уроков: https://knpuniversity.com Это поможет вам лучше понимать структуру Symfony Framework

×