Как стать автором
Обновить

Интегрируем google maps

Время на прочтение 2 мин
Количество просмотров 2.7K
Google maps — отличное средство для картографии и сейчас мы будем интегрировать его себе на сайт благодаря открытому API. Интегрировать будем не только фиксированное положение но и произвольное, а именно — создадим в базе данных таблицу «locations», впишем там поля title, x, y.

Теперь нам надо редактировать каждое местоположение. Создадим полотно, где будет отображаться карта.
<div id="map" style="width: 250px; height: 250px"> </div>

Дальше — прикрутим вызов библиотеки из google. Поскольку я использую smarty, то я передаю ключ разработчика в виде переменной.
<script src="http://maps.google.com/maps?file=api&v=2&key={$google_maps_hash}" type="text/javascript"></script>


Теперь сделаем функцию, которая будет заниматься всей гразной работой — создавать карту в нашем div элементе, позиционировать согласно заданным координатам, устанавливать bubble. В случае если мы редактируем эти координаты, то функция будет по обратной связи прописывать в скрытые input-поля некоей формы «registration_form» новые координаты перенесённого pin-указателя.
<script type="text/javascript">
function load_map(x,y,title) {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(x, y), 13);
map.enableScrollWheelZoom();

point = new GLatLng(x, y);
marker = new GMarker(point);

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(marker);
marker.openInfoWindowHtml(title);
/*
var mgr = new GMarkerManager(map);

GEvent.addListener(marker, "dragend", function() {
//var center = map.getCenter();
var strCenter=marker.getPoint();
marker.openInfoWindowHtml(document.forms['registration_form'].title.value);
document.forms['registration_form'].geo_x.value=strCenter.lat();//arrCenter[0];
document.forms['registration_form'].geo_y.value=strCenter.lng();//arrCenter[1];

});
*/
}
}
</script>
Теги:
Хабы:
+19
Комментарии 30
Комментарии Комментарии 30

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн