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!

Answer 1

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>