Googleマップはマウスオーバー時にマーカーグラフィックを変更します

Question

マウスオーバーでマーカーのグラフィックを変更するために私のコードが機能しないのはなぜですか？各mouseover/mouseout関数にmarker.setIconがありますが、動作していないようです。

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
 
\t \t \t \t 
 
\t \t \t \t  var marker, i; 
 
\t \t \t \t \t var id = 'sites'; 
 
\t \t \t \t \t 
 
\t \t \t \t \t for (i = 0; i < locations_beer.length; i++) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t var id = 'sites' + i; 
 
\t \t \t \t \t 
 
\t \t \t \t \t var contentString = '<div class="beer-map-popup">'+ locations_beer[i][0] +'<br /><img src="_img/beer-map-popup-wheat.png" border="0" /></div>'; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t var infowindow = new google.maps.InfoWindow({ 
 
\t \t \t  \t \t content: contentString 
 
\t \t \t \t \t }); 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t marker = new google.maps.Marker({ 
 
\t \t \t \t   position: new google.maps.LatLng(locations_beer[i][1], locations_beer[i][2]), 
 
\t \t \t \t   map: map 
 
\t \t \t \t \t \t ,id: id 
 
\t \t \t \t \t \t ,icon: 'http://www.ashtonbrewingcompany.com/_img/beermap-pin.png' 
 
\t \t \t \t \t \t ,url: locations_beer[i][4] 
 
\t \t \t \t \t \t ,zIndex:100 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t 
 
\t \t \t \t \t var icon1 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin-active.png"; 
 
\t \t \t \t \t var icon2 = "http://www.ashtonbrewingcompany.com/_img/beermap-pin.png"; 
 

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

Answer 1

あなたのマウスオーバー/マウスアウトリスナーに上の機能の閉鎖を持っていません。 mouseover/mouseoutリスナー関数内のthisがマーカーです。 1つの選択肢はmarker.setIcon(...)ではなくthis.setIcon(...)を使用するようにコードを変更することです。

proof of concept fiddle

コードスニペット：この追加

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>