Урок - Вывод метки возле маркера используя Google Maps API 3

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

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

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

Вывод метки (облака, всплывающей подсказки) возле маркера осуществляется с помощью InfoWindow-объекта GoogleMaps API 3.

 

var label = '<div>Спасибо, за Ваш выбор!</div>';
var infoWindow = new google.maps.InfoWindow({
    content: label
});
google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map,marker);
});

На первом шаге задаем значение метки label.

 

Далее создаем InfoWindow-объект и задаем содержимое (content) InfoWindow-объека.

На третьем шаге добавляем обработчик события click для нашего маркера. При клике по указанному маркеру будет отображаться окно с текстом "Спасибо, за Ваш выбор!".

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

<!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: 'Києво-Печерська лавра'
            }); 
            var label = '<div>Цэ Києво-Печерська лавра!</div>';
            var infoWindow = new google.maps.InfoWindow({
                content: label
            });
            google.maps.event.addListener(marker, 'click', function() {
                infoWindow.open(map,marker);
            });
        }
    </script>
</head>
<body onload="pageOnLoad()">
    <div id="map" style="width:400px;height:400px"></div>
</body>
</html>