В этой небольшой заметке я приведу шесть фрагментов кода для использования в API Google Maps v3, которые Вы сможете применять в Ваших проектах.
1. Масштабирование и центрирование нескольких маркеров на карте
Задача. У Вас на карте отображается несколько объектов (метки, поллинии или полигоны) и Вам нужно так провести масштабирование и центрирование карты, чтобы были видны все они.
Это можно сделать используя следующий код:
var latlngbounds = new google.maps.LatLngBounds();
for ( var i=0; i<points.length; i++ ){
latlngbounds.extend(points[i]);
}
map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds)); |
Здесь, points — массив координат меток на карте.
В примере мы проводим масштабирование и центрирование карты по меткам, тоже самое можно сделать для поллиний и многоугольников, передавая координаты узлов в виде массива.
2. Используем свои значки для маркеров на карте
Для того, чтобы мы могли на карте использовать маркеры со своим изображением значка, необходимо определить свой стиль.
Это можно сделать с помощью кода:
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
}; |
В начале мы определяем изображение значка метки image:
путь к файлу изображения значка метки, размер изображения, величина смещения координат точки относительно значка двумя значениями new google.maps.Point(0,0) и new google.maps.Point(0, 32))
Далее, аналагичный набор параметров для изображения тени значка (если необходимо).
В параметре shape — задается в пикселях кликабельная область вокруг значка, заданная полилинией.
Для присвоения определенных параметров метки необходимо определить нужные свойства:
var myLatLng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: text
}); |
Мы взяли код из предидущего примера и добавили определение значка для метки.
3. Удаляем объекты с карты
Для удаления объектов с карты в API Google Maps v3 нужно для каждого установить свойство setMap(null).
Например для группы маркеров на карте:
var markersArray = [];
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
} |
К нашему примеру мы добили кнопку, при нажатии на которую все маркеры удаляются с карты.
Здесь при добавлении маркеров на карту мы помещаем их в массив markers.
При нажатии на кнопку «Удалить маркеры», вызывается функция clearOverlays, в которой каждому маркеру определяется свойство markers[i].setMap(null);
4. Загрузка карты при клике.
В данном примере мы реализуем загрузку карты по клику на кнопке.
5. Отображение только одного открытого балуна на карте.
При создании карты с использованием API Google Maps v3, кликая по объектам на ней, мы можем открывать сколько угодно балунов, что не всегда удобно, особенно кода они перекрывают друг друга.
Мы можем изменить код так, чтобы открытым всегда оставался только один балун.
Здесь пред открытием нового балуна, старый закрывается.
6. Определение местоположения пользователя
Если Ваш картографический сервис рассчитан на большую аудиторию пользователей (из разных городов и стран), то возникает необходимость автоматического определения местоположения пользователя.
Мы сразу можем показать ему нужный участок карты.
Масштабирование и центрирование нескольких маркеров на карте
… latlngbounds.extend(points[i]);
или ошибка, или я не понял.
в LatLngBounds нужно передать координаты, т.е. должно быть
latlngbounds.extend(points[i].getPosition());
Неправильно пояснение написал, в массиве points содержаться координаты (долгота, широта)
здравствуйте , спасибо за хорошие уроки!
подскажите пожайлуста, как на карте выводить маркеры с разными значками , например: театры с одним, бары другим , гостинницы с третьим.
Нужно для каждой группы маркеров задать свой стиль, вот два примера задания стиля для метки пример-1 и пример-2
А также пример с разными маркерами пример
Отличные примеры, спасибо, очень помогли разобраться в Google Maps 3.
очень нужна Ваша помощь. Перекопал все и не нашел.
Возможно ли увидеть код карты где карта центрируется и зумируется как в примере 1, но при этом, чтобы открывались инфоокна как в предпоследнем примере.
Заранее спасибо за ответ.
Объединить самостоятельно не получается..
Сделал пример.
Огромное спасибо.То что надо.
Возможно ли пронумеровать метки? Вставить в маркер цифру или слово в 3-4 символа, чтобы при показе нескольких маркеров на них сразу отображались цифры(слова)? В API яндекса такое было, удивлен что в документации гуглокарт не нашел..
Заранее благодарен!
Ни где не нашел варианта с позиционированием и цэнтрированием меток относительно одной (получееной с БД), например цэнтральным офисом. Сделал вариант из realizaciya-poiska-po-dannym-polzovatelya-s-ispolzovaniem-api-google-maps-v3, СПОСИБО, работает хорошо. Конечно захотелось развить проект, пытался применить 1ый пример, срабатывает не всегда точно. По каким-то причинам в массиве меняются местами координаты. Можэт поможете разобратся 🙂
СПАСИБО, все заработало (выпрямил пальцы и сразу все пошло).
Осталось приукрасить:)
Добрый день! Подскажите пожалуйста, как реализовать показ только одного балуна на карте с кластеризацией? Как только не вставлял коды из ваших примеров, никак не получается… Заранее спасибо!