Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts

    Google Maps Pin Icon

    We got a google maps with a bunch of pins. Each pin is setup to use our blue custom icon image.

    I'm trying to make it so that when you click on a pin, that particular pin changes to a green version of the icon, and all the reset stay blue. If the user clicks another pin, it turns green and the previous goes back to blue.

    Basicly only the clicked active pin should be green.

    Code:
    google.maps.event.addListener(markers[indx], 'click', function() {
        this.setIcon("/images/greenmarker.png");
    });
    Here is my code so far that will change the clicked pin into a green version.

    My problem is all attempts to change all pins back to blue prior to changing this clicked pin to green fails bad.

    Anyone know how to do this or point me in the right direction?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,983
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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>
    Last edited by xelawho; 09-03-2011 at 02:16 AM. Reason: playing around

  • Users who have thanked xelawho for this post:

    ubh (09-08-2011)

  • #3
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •