6 полезных решений для работы с API Google Maps v3

В этой небольшой заметке я приведу шесть фрагментов кода для использования в 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 содержаться координаты (долгота, широта)
  • Гость: здравствуйте , спасибо за хорошие уроки! подскажите пожайлуста, как на карте выводить маркеры с разными значками , например: театры с одним, бары другим , гостинницы с третьим.
  • Гость: Нужно для каждой группы маркеров задать свой стиль, вот два примера задания стиля для метки <a href="http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/examples/icon-simple.html" rel="nofollow">пример-1</a> и <a href="http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/examples/icon-complex.html" rel="nofollow">пример-2</a> А также пример с разными маркерами <a href="http://www.geocodezip.com/v3_markers_normal_colored.html" rel="nofollow">пример</a>
  • Гость: Отличные примеры, спасибо, очень помогли разобраться в Google Maps 3.
  • Гость: очень нужна Ваша помощь. Перекопал все и не нашел. Возможно ли увидеть код карты где карта центрируется и зумируется как в примере 1, но при этом, чтобы открывались инфоокна как в предпоследнем примере. Заранее спасибо за ответ. Объединить самостоятельно не получается..
  • Гость: Сделал <a href="http://webmap-blog.ru/examples/gmap_z48_pr_dop.html" title="Пример" target="_blank" rel="nofollow">пример</a>.
  • Гость: Огромное спасибо.То что надо.
  • Гость: Возможно ли пронумеровать метки? Вставить в маркер цифру или слово в 3-4 символа, чтобы при показе нескольких маркеров на них сразу отображались цифры(слова)? В API яндекса такое было, удивлен что в документации гуглокарт не нашел.. Заранее благодарен!
  • Гость: Ни где не нашел варианта с позиционированием и цэнтрированием меток относительно одной (получееной с БД), например цэнтральным офисом. Сделал вариант из realizaciya-poiska-po-dannym-polzovatelya-s-ispolzovaniem-api-google-maps-v3, СПОСИБО, работает хорошо. Конечно захотелось развить проект, пытался применить 1ый пример, срабатывает не всегда точно. По каким-то причинам в массиве меняются местами координаты. Можэт поможете разобратся :)
  • Гость: СПАСИБО, все заработало (выпрямил пальцы и сразу все пошло). Осталось приукрасить:)
  • Гость: Добрый день! Подскажите пожалуйста, как реализовать показ только одного балуна на карте с кластеризацией? Как только не вставлял коды из ваших примеров, никак не получается... Заранее спасибо!
  • Гость: Доброго дня, к сожалению ну никак не получается наладить открытие ЕДИНСТВЕННОГО infoWindow :( Делаю как в примере, и в момент закрытия infoWindow - пустой объект инфо окна, как взять НУЖНЫЙ объект :( пока никак не дошел ... ПС в моменте infoWindow.close() поскольку ничего не происходило, поставил alert( infoWindow.getContent() ); и получаю ундефиндед :( соответственно закрытие не происходит, поскольку закрывать нечего.
  • Гость: Возможно, создание объекта infowindow следует делать за пределами listener.
  • Алексей Смирнов: Здравствуйте. Подскажите, как сделать как в примере "5. Отображение только одного открытого балуна на карте." Но чтобы один балун был открыт уже при загрузке карты?
  • Гость: var infoWindow = new google.maps.InfoWindow; var onMarkerClick = function() { var marker = this; var latLng = marker.getPosition(); infoWindow.setContent(marker.title); infoWindow.open(map, marker); }; google.maps.event.addListener(map, 'click', function() { infoWindow.close(); }); var marker1 = new google.maps.Marker({ map: map, title: 'Кинотеатр КАРО ФИЛЬМ в ТЦ Шоколад', position: new google.maps.LatLng(56.31927,44.026297) }); var marker2 = new google.maps.Marker({ map: map, title: 'Кинотеатр Октябрь', position: new google.maps.LatLng(56.317213,43.993976) }); var marker3 = new google.maps.Marker({ map: map, title: 'Кинотеатр Синема Парк', position: new google.maps.LatLng(56.308056,44.073827) }); google.maps.event.addListener(marker1, 'click', onMarkerClick); google.maps.event.addListener(marker2, 'click', onMarkerClick); google.maps.event.addListener(marker3, 'click', onMarkerClick);