다른 곳을 클릭하면 Google지도 아이콘이 변경됩니다.

Question

고급 맞춤 필드 Google지도 필드를 사용하여 Google지도 여러 위치 페이지 인 을 만들었습니다.

클릭하면 마커 아이콘이 바뀌지 만 다른 아이콘을 클릭하면 다시 바뀌 길 원합니다. 여기

코드의 예입니다

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: iconBase + 'Stock%20Index%20Up.png' 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0], locations[i][6]); 
     infowindow.open(map, marker); 
     marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); 
    } 
    })(marker, i)); 

여기에 작업 코드의

더 나은보기 : 당신은 배열에 모든 마커를 추가하면된다 할 것 : 말했다 무엇 던컨 http://jsfiddle.net/gargiguy/s8vgxp3g

Answer 1

. 클릭 이벤트 핸들러에서 해당 배열을 반복하면서 각 마커의 아이콘을 업데이트합니다. 그런 다음 마지막으로 클릭 한 아이콘에 대한 아이콘을 설정하십시오.

google.maps.event.addListener(marker, 'click', (function (marker, i) { 
    return function() { 
    infowindow.setContent(locations[i][0], locations[i][6]); 
    infowindow.open(map, marker); 
    for (var j = 0; j < markers.length; j++) { 
     markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png"); 
    } 
    marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); 
}; 

working fiddle

작업 코드는 : 당신은 단지 원래로 다시 이전의 아이콘을 변경해야처럼

var markers = []; 
 
var map; 
 

 
function initialize() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 12, 
 
    // center: new google.maps.LatLng(-33.92, 151.25), 
 
    center: new google.maps.LatLng(36.8857, -76.2599), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 
    var iconBase = 'https://cdn3.iconfinder.com/data/icons/musthave/24/'; 
 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map, 
 
     icon: iconBase + 'Stock%20Index%20Up.png' 
 
    }); 
 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infowindow.setContent(locations[i][0], locations[i][6]); 
 
     infowindow.open(map, marker); 
 
     for (var j = 0; j < markers.length; j++) { 
 
      markers[j].setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Up.png"); 
 
     } 
 
     marker.setIcon("https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png"); 
 
     }; 
 
    })(marker, i)); 
 
    markers.push(marker); 
 

 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 
var locations = [ 
 
    [ 
 
    "New Mermaid", 
 
    36.9079, -76.199, 
 
    1, 
 
    "Georgia Mason", 
 
    "", 
 
    "Norfolk Botanical Gardens, 6700 Azalea Garden Rd.", 
 
    "coming soon" 
 
    ], 
 
    [ 
 
    "1950 Fish Dish", 
 
    36.87224, -76.29518, 
 
    2, 
 
    "Terry Cox-Joseph", 
 
    "Rowena's", 
 
    "758 W. 22nd Street in front of Rowena's", 
 
    "found" 
 
    ], 
 
    [ 
 
    "A Rising Community", 
 
    36.95298, -76.25158, 
 
    3, 
 
    "Steven F. Morris", 
 
    "Judy Boone Realty", 
 
    "Norfolk City Library - Pretlow Branch, 9640 Granby St.", 
 
    "found" 
 
    ], 
 
    [ 
 
    "A School Of Fish", 
 
    36.88909, -76.26055, 
 
    4, 
 
    "Steven F. Morris", 
 
    "Sandfiddler Pawn Shop", 
 
    "5429 Tidewater Dr.", 
 
    "found" 
 
    ], 
 
    [ 
 
    "Aubrica the Mermaid (nee: Aubry Alexis)", 
 
    36.8618, -76.203, 
 
    5, 
 
    "Myke Irving/ Georgia Mason", 
 
    "USAVE Auto Rental", 
 
    "Virginia Auto Rental on Virginia Beach Blvd", 
 
    "found" 
 
    ] 
 
];

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div> 
 
    <div id="map" style="width: 500px; height: 400px;"></div> 
 
</div>

Answer 2

이 소리 때문에 나는 않을 것 모든 마커를 반복하는 것이 좋습니다. 마커가 많은지도에서는 ​​꽤 무거워 질 수 있습니다.

대신 활성 마커를 click 이벤트의 변수에 저장하고 변경 될 때 해당 마커를 업데이트합니다.

var marker; 
var activeMarker; 
var iconDefault = iconBase + 'Stock%20Index%20Up.png'; 
var iconSelected = 'https://cdn3.iconfinder.com/data/icons/musthave/24/Stock%20Index%20Down.png'; 

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map, 
    icon: iconDefault 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent(locations[i][0], locations[i][6]); 
     infowindow.open(map, marker); 

     // check to see if activeMarker is set 
     // if so, set the icon back to the default 
     activeMarker && activeMarker.setIcon(iconDefault); 

     // set the icon for the clicked marker 
     marker.setIcon(iconSelected); 

     // update the value of activeMarker 
     activeMarker = marker; 
    } 
    })(marker, i)); 
}