title: Google Maps API Javascript hover effect on marker mouseout
body: <p>I have an array of coordinates for the google map. Each coordinates set gets its own individual marker. If the user hovers (mouseover) the marker, it gets exchanged by another icon (this Icon is the same for all markers). My problem is, that if the user makes a mouseout I want to restore the original icon, but I just get the last created marker (marker3.png) for all markers then.</p>
  
  <p>Maybe you have an idea. Here is the script:</p>
  
  <pre><code>$(document).ready(function(){
                              var locations = [
                              ['Dr. Christian Schrey', 52.499496, 13.316873, 4],
                              ['Dr. Teufel', 52.528664, 13.380232, 5],
                              ['Dr. Sebs Firma', 52.507839, 13.496490, 3],
  
                              ];
  
                              initialize();
                              var map;
                              function initialize() {
                              var myLatlng = new google.maps.LatLng(52.52427, 13.40629);
                              var myOptions = {
                                  zoom: 11,
                                  center: myLatlng,
                                  mapTypeId: google.maps.MapTypeId.ROADMAP
                              }
                              map = new google.maps.Map(document.getElementById("Map"), myOptions);
  
                              var infowindow = new google.maps.InfoWindow();
  
                              var marker, i;
                              var y = 0;
  
                              for (i = 0; i &lt; locations.length; i++) {  
                              y++;
                              image = 'http://xxx.de/test6/system/css/images/marker'+y+'.png';
  
                              marker = new google.maps.Marker({
                                  position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                  map: map,
                                  icon: image
                              });
  
                              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                  return function() {
                                  infowindow.setContent(locations[i][0]);
                                  infowindow.open(map, marker);
                                  }
                              })(marker, i));
  
                              google.maps.event.addListener(marker, "mouseover", function(event) {
                              this.setIcon("http://xxx.de/test6/system/css/images/pfote_clean.png");
                              });
  
                              google.maps.event.addListener(marker, "mouseout", function(event) {
                              this.setIcon(image);
                              });
  
                              }
  
                          };
                      });
  </code></pre>
  
  <p>I appreciate any help! Thank you.</p>