Google Maps API. Маркеры, кластеры и геокодирование

Добавление маркера на карту

Обычный маркер добавить очень просто. Достаточно коротенького кода:

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 будет содержать адрес в текстовом виде.


Пример с установкой маркеров и получение их адреса с помощью геокодера. Для установки маркера - кликните на карту.

Посмотреть пример

Список статей о Google Maps API смотрите здесь