Добавление маркера на карту
Обычный маркер добавить очень просто. Достаточно коротенького кода:var marker = new google.maps.Marker({ position: new google.maps.LatLng('56', '37'), map: map });
и маркер будет установлен. Однако это будет пустой и стандартный маркер.
Сделаем его более уникальным, заменив изображение маркера:
var image = new google.maps.MarkerImage('marker_image.png', new google.maps.Size(32, 37), new google.maps.Point(0,0), new google.maps.Point(16, 35) ); var marker = new google.maps.Marker({ position: new google.maps.LatLng('56', '37'), map: map, title: 'Marker Title', icon: image });
marker_image.png - замените на свое изображение маркера
Size - размер изображения
Point - смещение изображения (чтобы якорь маркера был в нужной точке)
Изображение маркера изменили, теперь нужно установить на маркер балун (всплывающее окошко при клике на маркер).
Создаем балун:
var infowindow = new google.maps.InfoWindow({ content: 'Marker content' });
Создаем событие, которое откроет балун на карте при клике на наш маркер:
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, this); });
Вам могут пригодиться эти функции балунов:
infowindow.setContent('Marker content'); infowindow.close();
setContent - изменяет наполнение балуна не изменяя его статус (открыт\закрыт).
close - закрывает балун.
Кластеризация маркеров
К сожалению, в картах гугла нет встроенной кластеризации. Однако есть несколько сторонних функций.Одну из них можно скачать здесь
Выглядит это так:
Без кластеризации:
С кластеризацией:
Подключаем этот скрипт к странице и делаем изменения в коде карты:
var markers = []; var marker = new google.maps.Marker({ position: new google.maps.LatLng('56', '37') }); markers.push(marker); markerClusterer = new MarkerClusterer(map, markers, { maxZoom: 13, gridSize: 50, styles: null });
maxZoom – максимальный зум, при котором маркеры будут группироваться в кластеры
gridSize – размер ячеек сетки. Чем меньше значение, тем меньше сетка группировки
styles – дополнительные стили
Обратите внимание - из функции создания маркера была удалена строка map: map. Это очень важно, т.к. теперь маркеры не будут добавляться на карту напрямую, они будут добавляться в кластер, а кластер уже будет добавлен на карту.
Функция очистки кластера может быть полезна:
markerClusterer.clearMarkers();
Геокодирование
Геокодирование бывает двух видов:1) Поиск адреса по координатам
2) Поиск координат по адресу
Поиска по адресу:
var geocoder = new google.maps.Geocoder(); geocoder.geocode({'address': 'Адрес','partialmatch': true}, function (results, status) { if (status == 'OK' && results.length > 0) { var location = results[0].geometry.location; }else{ // Адрес не найден } });
Массив results может содержать не одну запись, если похожий адрес был найден в нескольких разных точках. Но обычно самый точный из них идет первым (results[0]).
В переменную location были записаны координаты в виде объекта. Для их использования не нужно создавать координату через google.maps.LatLng, она уже готова, просто используйте эту переменную.
partialmatch - искать ли адреса с частичным совпадением
Поиска по координатам:
var geocoder = new google.maps.Geocoder(); geocoder.geocode({latLng:location}, function (results, status) { if (status == 'OK' && results.length > 0) { var address = results[0].formatted_address; }else{ // Адрес не найден } });
Переменная address будет содержать адрес в текстовом виде.
Пример с установкой маркеров и получение их адреса с помощью геокодера. Для установки маркера - кликните на карту.