Урок - Метод setIcon() - изменение изображения маркера в Google Maps API 3.

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

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

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

Метод setIcon(), у маркера позволяет задавать изображение для текущего маркера.

marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png');

В следующем примере используется метод setIcon() для смены изображения маркера:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var marker;
        function pageOnLoad() {
            var centerLatLng = new google.maps.LatLng(50.435132,30.55777);
            var mapOptions = {
                zoom: 10,
                center: centerLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.ZOOM_PAN
                }
            }
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);    
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(50.435132,30.55777),
                map:      map
            });            
        }
    </script>
    <style type="text/css">
        img {
            cursor: pointer;
        }
    </style>
</head>
<body onload="pageOnLoad()"> 
    <div id="map" style="width:400px;height:400px"></div>
    <img src="http://google-maps-icons.googlecode.com/files/factory.png" onclick="marker.setIcon(this.src)">
    <img src="http://google-maps-icons.googlecode.com/files/toilets.png" onclick="marker.setIcon(this.src)">
    <img src="http://google-maps-icons.googlecode.com/files/wc-handicap.png" onclick="marker.setIcon(this.src)">
    <img src="http://google-maps-icons.googlecode.com/files/wifi.png" onclick="marker.setIcon(this.src)">
</body>
</html>

При клике по изображениям курсоров - будет меняться изображение на маркере.