Добавление маркера на карту
Обычный маркер добавить очень просто. Достаточно коротенького кода:
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 будет содержать адрес в текстовом виде.
Пример с установкой маркеров и получение их адреса с помощью геокодера. Для установки маркера - кликните на карту.
