Your SlideShare is downloading. ×
Google Map маркеры вместе с 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 маркеры вместе с Symfony2

830
views

Published on

Стилизация маркеров Google Map используя CSS. Управление маркерами с использованием Symfony2 PHP Framework.

Стилизация маркеров Google Map используя CSS. Управление маркерами с использованием Symfony2 PHP Framework.

Published in: Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
830
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
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