Google map markers with Symfony2

Symfony2 + Google Map
и немного Rich Marker

Что будем использовать?
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

и многое другое...

http://getcomposer.org

Творим!

Конфигурация зависимостей в
https://packagist.org
composer.json

Установка 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

Структура
файлов Symfony

Подключение Google Maps API
В тэг <head> основного шаблона поместить:
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

В тэг <body> где нужна карта размещаем:
<div id="map_canvas"></div>

Ограничения по использованию
В случае если дневной трафик
переваливает за 25000 показов,
подключать карту нужно будет с API_KEY
через Google APIs Console. Тогда Google
Map API будет для вас платным.

map.js
Создаем свой локальный map.js файл и в
нём будем писать логику работы с картой.
Его так же подключаем в <head>, только
после подключения Google Map API.

var g = google.maps;

Инициализация карты в div и
создание маркера
map = new g.Map(document.getElementById("map_canvas"), mapOptions);

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
}
};

Обработчики событий

RichMarker
Класс RichMarker расширяется от
OverlayView и позволяет создавать
маркер не просто картинкой, а HTMLкодом, но объявляется так же просто как
и обычный маркер.
Вот мы и добрались до DOM.
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html

Создание маркера с HTML
Функция drawOBJMarker вызывается
функцией поиска и передает туда
объект, который требуется отобразить
на карте:

Вывод на карту RichMarker-ов
Сейчас я
совершил поиск
по тэгу
“monument”.
Появилось три
кружочка.

Сущность объекта маркера

Поле изображения в сущности
маркера объекта

Конфигурация бандла VichUploaderBundle

Изображения обрабатывает
LiipImagineBundle
В процессе отрисовки маркеров
существует несколько размеров одной
и той же картинки для поиска и для
увеличенной после нажатия на маркер
объекта.
LiipImagine создаёт миниатюры, следит
чтобы картинка вписывалась в нужные
размеры.

Конфигурация liip_imagine
app/config.yml

Если вы новичок в Symfony,
можете получить представление
на сайте видео-уроков:
https://knpuniversity.com
Это поможет вам лучше понимать
структуру Symfony Framework

Google map markers with Symfony2

Recommandé

Recommandé

Contenu connexe

Similaire à Google map markers with Symfony2

Similaire à Google map markers with Symfony2 (20)

Plus de DevOWL Meetup

Plus de DevOWL Meetup (20)

Google map markers with Symfony2