Как подключить к сайту третью версию API гуглокарт я рассказывал совсем недавно. Сегодня я приведу пример того, как можно «тюнинговать» свои карты. Задачей будет вывод на карту информации от сервиса Google Place.
Будем считать, что у нас уже есть подключенные при помощи API карты Google. Для того, чтобы заработал требуемый сервис Google Place, необходимо подключить соответствующую библиотеку. Обновим адрес подключения скрипта API карт:
В разметке HTML пока ничего не меняем. Напомню, что карты выводятся в div с id=»map». Теперь можно приступить непосредственно к подключению карт.
var map;
var infowindow;
function initialize() {
var myLatLon = new google.maps.LatLng(, );
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLatLon,
zoom: 15
});
var metka = new google.maps.Marker({
position: myLatLon,
map: map,
title:"Тут описание точки"
});
Код всё тот же. Динамически генерируем координаты центра карты, туда же ставим метку с необходимым объектом. Теперь начинаем работать с Places. Сформируем запрос к серверу Google.
var request = {
location: myLatLon,
radius: 500,
types: ['bar']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}/*это скобка, закрывающая функцию initialize*/
Синтаксис таков: location — это центр окружности, в которой будет производиться поиск объектов. radius — это радиус соответствующей окружности в метрах. Types — тип искомых объектов. Сейчас там выставлено значение bar — ищем бары в радиусе 500 метров от центра карты. Если необходимо вывести несколько типов, их можно перечислить через запятую.
Далее добавляем к каждой полученной точке инфоокно, в котором будет содержаться название точки.
После всего этого вызываем функцию service.search. Это поиск по запросу в переменной request и работающий с функцией callback. Опишем её.
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
Вкратце - для каждой найденной точки генерируется метка.
Теперь опишем свойства самой метки и то, как она генерируется
var image = 'metka.png';
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: image
});
При создании метки ей будет добавляться картинка metka.png, которая лежит в корне нашего сервера.
И напоследок добавим вывод инфоокна метки по клику на ней самой.
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Готово! Теперь можно посмотреть на результат. Однако, он статичен. Вдруг пользователю интересны не магазины, а, скажем, кафе? Научим наш модуль работать динамически.
Добавим форму с выпадающими списками