Web Analytics Made Easy -
StatCounter Google Maps Pin Icon - CodingForum

Announcement

Collapse
No announcement yet.

Google Maps Pin Icon

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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?
    Basics of CSS Faster Than Ever Tutorial!||jQuery zLayers Parallax Plugin||Pure CSS Menu & Infinite Sub Menus Tutorial||Pure CSS Vertical Menu Tutorial||Pure CSS Horizontal Menu Tutorial||Real-time Image Typesetting with PHP GD

  • #2
    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; Sep 2, 2011, 10:16 PM. Reason: playing around

    Comment


    • #3
      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;
      Basics of CSS Faster Than Ever Tutorial!||jQuery zLayers Parallax Plugin||Pure CSS Menu & Infinite Sub Menus Tutorial||Pure CSS Vertical Menu Tutorial||Pure CSS Horizontal Menu Tutorial||Real-time Image Typesetting with PHP GD

      Comment

      Working...
      X