Announcement

**xelawho** · Sep 2, 2011, 08:45 PM

this might help. you can store a reference easily enough to which marker just got changed, the tricky part (for me anyway) was making the click listeners unique

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps change icon onclick</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <script type="text/javascript"  src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
	var markerchanged;
      function initialize() {
        var myOptions = {
          zoom: 4,
          center: new google.maps.LatLng(-25.363882, 131.044922),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

       setMarkers();
}

points = [new google.maps.LatLng(-20.363882, 135.044922),
new google.maps.LatLng(-20.363882, 131.044922),
new google.maps.LatLng(-25.363882, 131.044922),
new google.maps.LatLng(-25.363882, 135.044922)];

function createMarker(latlng) {
    var marker = new google.maps.Marker({
        position: latlng,
		icon: "/images/bluemarker.png",
        map: map,
        });

    google.maps.event.addListener(marker, 'click', function() {
	if (markerchanged) {markerchanged.setIcon("/images/bluemarker.png");}
	        marker.setIcon("/images/greenmarker.png");
			markerchanged=marker;
        });
}

function setMarkers() {
  // Add markers to the map
  for (var i = 0; i < points.length; i++) {
    var loc = points[i];
    var marker = createMarker(loc);
  }
}
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

  </head>
  <body>
    <div id="map_canvas" style="height:500px"></div>
  </body>
</html>

**ubh** · Sep 8, 2011, 04:53 PM

Thankx1000 xelawho!

Just as a note to self, add this prior to any GM options setup:

Code:

var markerchanged;

Then at the end of our pin's click event add the following to the end of the event:

Code:

if (markerchanged) {markerchanged.setIcon("#{facesContext.externalContext.requestContextPath}/mimages/bluemarker.png");}
this.setIcon("#{facesContext.externalContext.requestContextPath}/images/marker.png");
markerchanged=this;

Announcement

Google Maps Pin Icon

Google Maps Pin Icon

Comment

Comment