user1110562 user1110562 - 3 months ago 26
Javascript Question

Google Maps change marker graphic on mouseover

Can someone help me figure out why my code below does not work to change the marker graphic on mouseover? I have the marker.setIcon in each mouseover / mouseout function, but it doesn't seem to work.



var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var marker, i;
var id = 'sites';

for (i = 0; i < locations_beer.length; i++) {

var id = 'sites' + i;

var contentString = '<div class="beer-map-popup">'+ locations_beer[i][0] +'<br /><img src="_img/beer-map-popup-wheat.png" border="0" /></div>';

var infowindow = new google.maps.InfoWindow({
content: contentString
});



marker = new google.maps.Marker({
position: new google.maps.LatLng(locations_beer[i][1], locations_beer[i][2]),
map: map
,id: id
,icon: 'http://www.ashtonbrewingcompany.com/_img/beermap-pin.png'
,url: locations_beer[i][4]
,zIndex:100
});

var icon1 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png";
var icon2 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin.png";


(function(infowindow) {

google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, this);
marker.setIcon("http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png");
});

google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
marker.setIcon("http://www.ashtonbrewingcompany.com/_img/beermap-pin.png");
});
})(infowindow);


}




Answer

You don't have function closure on marker in your mouseover/mouseout listener. The this inside the mouseover/mouseout listener function is the marker. One option would be to change your code to use this.setIcon(...) rather than marker.setIcon(...).

proof of concept fiddle

code snippet:

function initialize() {
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var marker, i;
  var id = 'sites';
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations_beer.length; i++) {

    var id = 'sites' + i;

    var contentString = '<div class="beer-map-popup">' + locations_beer[i][0] + '<br /><img src="_img/beer-map-popup-wheat.png" border="0" /></div>';

    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations_beer[i][1], locations_beer[i][2]),
      map: map,
      id: id,
      icon: 'http://www.ashtonbrewingcompany.com/_img/beermap-pin.png',
      url: locations_beer[i][4],
      zIndex: 100
    });
    bounds.extend(marker.getPosition());
    var icon1 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png";
    var icon2 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin.png";


    (function(infowindow) {

      google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.open(map, this);
        this.setIcon("http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png");
      });

      google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();
        this.setIcon("http://www.ashtonbrewingcompany.com/_img/beermap-pin.png");
      });
    })(infowindow);
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var mapOptions = {};
var locations_beer = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

Comments