События Google Карт
Нажмите маркер, чтобы увеличить
Мы по-прежнему используем карту с предыдущей страницы: карту с центром в Лондоне, Англия.
Теперь мы хотим увеличить масштаб, когда пользователь нажимает на маркер (мы прикрепляем к маркеру обработчик событий, который увеличивает масштаб карты при нажатии).
Вот добавленный код:
Пример
// Zoom to 9 when clicking on marker
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:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Установите маркеры и откройте InfoWindow для каждого маркера
Запуск функции, когда пользователь щелкает карту.
Функция 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: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}