Google Maps API v3: marker - setImage sets more than one marker on the map

Question

I have got a map with a set of markers. Every marker has a listener assigned (click). Click event triggers setImage method of self and should also check whether same image (assigned to another marker) exist on the map - if yes, the other marker image should be replaced with another picture.

The problem: after setImage method is executed, it populates currently clicked image to all markers that are already clicked (markers are stored as an array). There is a synchronous call within listener code. The code contains a few RoR wrappers.

function initialize() {
  var myLatlng = new google.maps.LatLng(15.000, 0);
  var myOptions = {
    scrollwheel: false,
    center: myLatlng,
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);

  var locations = <%= array_or_string_for_javascript(@locations) %>;

  var art_img = new google.maps.MarkerImage('<%= image_path(@artist.img_name + "_small.png") %>',
      new google.maps.Size(70, 61),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 61));

  var shadow = new google.maps.MarkerImage('<%= image_path("flag_shadow.png") %>',
      new google.maps.Size(75, 75),
      new google.maps.Point(0,0),
      new google.maps.Point(-7, 72));
  var markers = [];
  var markers_tmp = [];
  <% @locations.each do |location| %>
    var location = <%= location %>;
    var image_url = location['result'];
    if (image_url == "") {
      image_url = '<%= image_path("flag_unselect.png") %>';
    }
    var image = new google.maps.MarkerImage(image_url,
        new google.maps.Size(70, 61),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 61));

    var unsel_image = new google.maps.MarkerImage('<%= image_path("flag_unselect.png") %>',
        new google.maps.Size(70, 61),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 61));

    var art_img = new google.maps.MarkerImage('<%= image_path(@artist.img_name + "_small.png") %>',
        new google.maps.Size(70, 61),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 61));

    var myLatLng = new google.maps.LatLng(location['posx'], location['posy']);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        zIndex: location['loc_id']
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {

      $.__customStorage = {};
      $.ajax({
        url: "/main/get_current_artist",
        dataType: 'json',
        async: false,
        success: function(data) {
          $.__customStorage.ajaxResponse = data;
        }
      })
      var current_artist = '/assets/' + $.__customStorage.ajaxResponse + '_small.png';
      art_img.url = '/assets/' + $.__customStorage.ajaxResponse + '_small.png';

      for (var i = 0; i < markers.length; i++) {
        if (markers[i] == this) {
          markers[i].setIcon(art_img);
        }
      }

  });

  <% end %>
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

I have found that the MarkerImage object has to be initialized any time before SetIcon is called. So I replaced the addListener function body:

google.maps.event.addListener(marker, 'click', function() {

  $.__customStorage = {};
  $.ajax({
    url: "/main/get_current_artist",
    dataType: 'json',
    async: false,
    success: function(data) {
      $.__customStorage.ajaxResponse = data;
    }
  })
  var current_artist = '/assets/' + $.__customStorage.ajaxResponse + '_small.png';
  art_img.url = '/assets/' + $.__customStorage.ajaxResponse + '_small.png';

  for (var i = 0; i < markers.length; i++) {
    if (markers[i] == this) {
      markers[i].setIcon(art_img);
    }
  }

});

with the code:

    google.maps.event.addListener(marker, 'click', function() {

      $.__customStorage = {};
      $.ajax({
        url: "/main/get_current_artist",
        dataType: 'json',
        async: false,
        success: function(data) {
          $.__customStorage.ajaxResponse = data;
        }
      })
      var art_img = new google.maps.MarkerImage('/assets/' + $.__customStorage.ajaxResponse + "_small.png",
        new google.maps.Size(70, 61),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 61));
      this.setIcon(art_img);              
      $.ajax({
        url: "/main/set_markers" + '?image=' + art_img.url + '&locid=' + this.zIndex,
        dataType: 'json'
      }).done(function() {
      });

      for (var i = 0; i < markers.length; i++) {
        if ((markers[i].zIndex != this.zIndex) &&
            (markers[i].icon.url == this.icon.url)) {
          var unsel_image = new google.maps.MarkerImage('<%= image_path("flag_unselect.png") %>',
              new google.maps.Size(70, 61),
              new google.maps.Point(0,0),
              new google.maps.Point(0, 61));
          markers[i].setIcon(unsel_image);
          $.ajax({
            url: "/main/set_markers_unsel" + "?markers_unsel=" + markers[i].zIndex,
            dataType: 'json'
          }).done(function() {
          });
        }
      }
  });