Google Maps API v3 Active Marker onClick

Question

I have an addListener click method for markers on a Google Map (in the setMarkers function):

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);
        });
    }
}

What I'm looking to do is change the "active" marker to a different image. I did see google.maps.MarkerImage class but when all of my attempts so far have replaced "a" marker (not the one I selected) with the URL, but then the marker doesn't convert back to normal on the next click (or close of the info box). I feel like I'm pretty close, but am pretty stuck in the mud at the moment. Any help would be greatly appreciated. Thanks!

Solution

Here is my example (ported from Mike Williams' v2 tutorial):

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

One way to do it (jsfiddle from your last question, updated): http://jsfiddle.net/geocodezip/r7fu3a1y/1/

working code snippet:

var infowindow = null;
var gmarkers = [];

var defaultIcon = {
  url: 'http://maps.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://maps.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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<h1>Map</h1>
<div id="map_canvas"></div>

Comments

[Kiran Dash]

This is great. But the problem is when you have say 1000 markers it takes a bit more time. So is there a way to get only active markers and change the icon for them instead of all the markers. That will save some time

[geocodezip]

I would think so, but that is another question.