Урок - Добавление действия по клику на маркер в Google Maps API 3.

Главная » Курсы » Курс Google Maps 3, примеры использования. » Урок - Добавление действия по клику на маркер в Google Maps API 3.

Обучающий онлайн курс
Google Maps 3, примеры использования.

Лицензия: Копирование запрещено.

Добавления событий для маркеров осуществляется с помощью функции google.maps.event.addListener():

google.maps.event.addListener(marker, 'click', function() {

alert('Спасибо, за правильный выбор');

});

Функция google.maps.event.addListener() принимает несколько аргументов:

  • первый аргумент - маркер (Marker-объект) для которого добавляется событие
  • второй аргумент - название событие, которое добавляется
  • третий аргумент - обработчик, который будет выполнятся при возникновении события (второй аргумент)

и пример полностью:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function pageOnLoad() {
            var centerLatLng = new google.maps.LatLng(50.435132,30.55777);
            var mapOptions = {
                zoom: 10,
                center: centerLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            var marker = new google.maps.Marker({
                map: map,
                position: centerLatLng,
                title: 'Києво-Печерська лавра'
            }); 
            google.maps.event.addListener(marker, 'click', function() {
                alert('Спасибо, за правильный выбор');
            }); 
        }
    </script>
</head>
<body onload="pageOnLoad()">
    <div id="map" style="width:400px;height:400px"></div>
</body>
</html>