Google지도 API v3의 활성 마커

Question

내가합니다 (setMarkers 기능에서) 구글지도에서 마커에 대한 addListener 클릭 방법을 가지고 온 클릭 :

var infowindow = null; 

$(document).ready(function() { initialize(); }); 

function initialize() { 

    var centerMap = new google.maps.LatLng(39.828175, -98.5795); 

    var myOptions = { 
     zoom: 4, 
     center: centerMap, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    setMarkers(map, sites); 
    infowindow = new google.maps.InfoWindow({ 
      content: "loading..." 
     }); 

    var bikeLayer = new google.maps.BicyclingLayer(); 
    bikeLayer.setMap(map); 
} 

var sites = [ 
    ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'], 
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'], 
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'], 
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.'] 
]; 



function setMarkers(map, markers) { 
    var myContentDiv = document.getElementById('myDivID');//Reference to you DOM elem 

    for (var i = 0; i < markers.length; i++) { 
     var sites = markers[i]; 
     var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
     var marker = new google.maps.Marker({ 
      position: siteLatLng, 
      map: map, 
      title: sites[0], 
      zIndex: sites[3], 
      html: sites[4] 
     }); 

     var contentString = "Some content"; 
     //marker.xtraData = 'SomeExtraData';//You can even add more data this way 

     google.maps.event.addListener(marker, "click", function() { 
      //alert(this.html); 
      var myTemplate = '<h1>'+this.title+'<h1><p>'+this.html+'</p>'; 

      myContentDiv.innerHTML = myTemplate;//Inset this html inside link 
      //infowindow.setContent(this.html); 
      //infowindow.open(map, this); 
     }); 
    } 
} 

내가 "활성"마커를 변경하면됩니다 찾고 있어요 다른 이미지로 나는 google.maps.MarkerImage 클래스를 보았지만 지금까지의 모든 시도가 지금까지 "a"마커 (URL이 선택한 마커)를 URL로 대체했지만 다음 마커가 다음 클릭시 일반으로 변환되지 않습니다. 정보 상자). 나는 거의 가깝다고 느끼지만, 지금은 진흙 속에 꽤 빠지다. 어떤 도움이라도 대단히 감사하겠습니다. 감사! 그것을 할 수

http://www.geocodezip.com/v3_MW_example_hoverchange.html

한 가지 방법 (마지막 질문에서 jsfiddle을 업데이트) : http://jsfiddle.net/kV6Ys/44/

작업 코드 :

여기

Answer 1

은 ( Mike Williams' v2 tutorial에서 포팅) 내 예입니다

var infowindow = null; 
 
    var gmarkers = []; 
 

 
    var defaultIcon = {url: 'http://google.com/mapfiles/ms/micons/red-dot.png', 
 
     // This marker is 32 pixels wide by 32 pixels tall. 
 
     size: new google.maps.Size(32, 32), 
 
     // The origin for this image is 0,0. 
 
     origin: new google.maps.Point(0,0), 
 
     // The anchor for this image is the base of the flagpole at 0,32. 
 
     anchor: new google.maps.Point(16, 32)}; 
 

 
    var activeIcon = {url: 'http://google.com/mapfiles/ms/micons/yellow-dot.png', 
 
     // This marker is 20 pixels wide by 32 pixels tall. 
 
     size: new google.maps.Size(32, 32), 
 
     // The origin for this image is 0,0. 
 
     origin: new google.maps.Point(0,0), 
 
     // The anchor for this image is the base of the flagpole at 0,32. 
 
     anchor: new google.maps.Point(16, 32)}; 
 
     // Shapes define the clickable region of the icon. 
 
     // The type defines an HTML <area> element 'poly' which 
 
     // traces out a polygon as a series of X,Y points. The final 
 
     // coordinate closes the poly by connecting to the first 
 
     // coordinate. 
 
    var shape = { 
 
     coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0], 
 
     type: 'poly' 
 
    }; 
 

 
    $(document).ready(function() { initialize(); }); 
 

 
    function initialize() { 
 

 
     var centerMap = new google.maps.LatLng(39.828175, -98.5795); 
 

 
     var myOptions = { 
 
      zoom: 4, 
 
      center: centerMap, 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     } 
 

 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 

 
     setMarkers(map, sites); 
 
     infowindow = new google.maps.InfoWindow({ 
 
       content: "loading..." 
 
      }); 
 

 
     var bikeLayer = new google.maps.BicyclingLayer(); 
 
     bikeLayer.setMap(map); 
 
    } 
 

 
    var sites = [ 
 
     ['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'], 
 
     ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'], 
 
     ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'], 
 
     ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.'] 
 
    ]; 
 

 

 

 
    function setMarkers(map, markers) { 
 

 
     for (var i = 0; i < markers.length; i++) { 
 
      var sites = markers[i]; 
 
      var siteLatLng = new google.maps.LatLng(sites[1], sites[2]); 
 
      var marker = new google.maps.Marker({ 
 
       position: siteLatLng, 
 
       map: map, 
 
       title: sites[0], 
 
       icon: defaultIcon, 
 
       zIndex: sites[3], 
 
       html: sites[4] 
 
      }); 
 

 
      var contentString = "Some content"; 
 

 
      google.maps.event.addListener(marker, "click", function() { 
 
       //alert(this.html); 
 
       for (var i=0; i<gmarkers.length; i++) { 
 
        gmarkers[i].setIcon(defaultIcon); 
 
       } 
 
       this.setIcon(activeIcon); 
 
       infowindow.setContent(this.html); 
 
       infowindow.open(map, this); 
 
      }); 
 
      gmarkers.push(marker); 
 
     } 
 
    }

#map_canvas { 
 
    width:600px; 
 
    height:600px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.google.com/maps/api/js"></script> 
 
<h1>Map</h1> 
 
<div id="map_canvas"></div>