2013-03-20 3 views
11

다음 Google 문서를 따라 가면 마커 아이콘을 쉽게 변경할 수 있습니다. 그러나 나는 붙어있어, 어떻게 마커를 클릭하면 이미지를 변경할지 모르겠다? 지금까지google map API v3 마커 아이콘을 변경 하시겠습니까?

내 코드 :

<script> 
    function initialize() { 

    var latlngPos = new google.maps.LatLng(<?php echo $event_google_map_coordinates; ?>); 

    var mapOptions = { 
     zoom: 16, 
     center: latlngPos, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('googlemap_event'), 
     mapOptions); 

    var marker = new google.maps.Marker({ 
     position: latlngPos, 
     map: map, 
     //animation: google.maps.Animation.BOUNCE, 
     icon: '<?= get_bloginfo("template_url"); ?>/images/marker.png' 
    }); 

    var infowindow = new google.maps.InfoWindow({ 
     position: latlngPos, 
     maxWidth: 200, 
     content: "<h3><?php the_title(); ?></h3><?php if ($event_address_meta) {_e($event_address_meta);} ?>" 
    }); 

    //open onclick 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map); 
    }); 

    //open infowindow onload 
    //infowindow.open(map); 

    } 

function loadScript() { 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'http://maps.googleapis.com/maps/api/js?key=AIzaSyCK3XUMWOH0GIiuj3VeprakKZXoo_nDV08&sensor=false&' + 
    'callback=initialize'; 
    document.body.appendChild(script); 
} 

window.onload = loadScript; < /script> 
<div id="googlemap_event"></div> 
+0

[google.maps.Marker] (https://developers.google.com/maps/documentation/javascript/reference#Marker) – geocodezip

답변

28

이보십시오.

//open onclick 
    google.maps.event.addListener(marker, 'click', function() { 
    marker.setIcon("Your Image");          
    infowindow.open(map); 
    }); 
+9

의의 setIcon 방법을보고 어떻게 내가 할 disselect에 그것을 다시 얻으 십시요? –

+1

원본 아이콘에 대한 참조를 저장합니다 (또는 항상 동일한 경우 다시 설정하십시오). – geocodezip

+0

기본 아이콘으로 돌아 가기. 시도 var 아이콘 = 새로운 GIcon(); marker.setIcon (아이콘); –

8

click 이벤트에 마커 아이콘을 설정해야합니다. 나는 이전의 바이올린을 수정 마커의 선택을 취소 활성화 jsfiddle

0

: 여기

google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map); 
      //Change the marker icon 
      marker.setIcon('https://www.google.com/mapfiles/marker_green.png'); 
    }); 

은 예입니다.

http://jsfiddle.net/zsw76pq9/

google.maps.event.addListener(map,'click', function() { 
    infoWindow.close(); 

    //Change the marker icon 
    marker.setIcon('https://www.google.com/mapfiles/marker_black.png'); 
});