События Google Maps

Масштабировать при клике по маркеру

Мы по-прежнему используем карту с прошлого урока: карта с центром в Лондоне, Великобритания.

Теперь мы хотим масштабировать карту при клике по маркеру (мы добавляем обработчик событий к маркеру, чтобы масштабировать карту при клике).

Вот добавленный код:

Пример

// Масштабировать до 9 при клике по маркеру
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Мы используем обработчик событий addListener() для регистрации уведомлений о событиях. Параметры,接受的 этим методом:

• Объект
• Событие, которое нужно отслеживать
• Функция, вызываемая при наступлении события

Перемещение карты к маркеру

Здесь мы сохраняем изменения масштаба и после 3 секунд перемещаем карту:

Пример

google.maps.event.addListener(marker,'click',function() {
  var pos = map.getZoom();
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  window.setTimeout(function() {map.setZoom(pos);},3000);
});

Информационное окно открывается при клике по маркеру

Информационное окно с текстом отображается при клике по маркеру:

Пример

var infowindow = new google.maps.InfoWindow({
  content: "Привет мир!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Установка маркеров и открытие информационных окон для каждого маркера

Функция запускается при клике по карте.

placeMarker() функция устанавливает маркер в месте клика пользователя и отображает информационное окно с координатами этого маркера:

Пример

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Широта: ' + location.lat() +
    'Долгота: ' + location.lng()
  });
  infowindow.open(map,marker);
}