liulixiang1988 / google-maps-utility-library-v3

Automatically exported from code.google.com/p/google-maps-utility-library-v3
0 stars 0 forks source link

Marker with changed icon disappears after Zooming. #168

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
Code used as a reply to an ajax request to a Rails 3.0.9 application:

var model = '<%= @model %>';
var real_estates = <%= raw @real_estates.to_json %>;

for (x in real_estates) {
  if (window.markers_keys.indexOf(model + real_estates[x].id) == -1) {
    var marker_latlng = new google.maps.LatLng(real_estates[x].latitude, real_estates[x].longitude);

    switch (model) {
    case 'Apartment':
      var icon = new google.maps.MarkerImage('images/real_estate_icons.png',
        new google.maps.Size(20, 32),
        new google.maps.Point(60,0),
        new google.maps.Point(10, 32));
      break;
    case 'House':
      var icon = new google.maps.MarkerImage('images/real_estate_icons.png',
        new google.maps.Size(20, 32),
        new google.maps.Point(40,0),
        new google.maps.Point(10, 32));
      break;
    case 'Flat':
      var icon = new google.maps.MarkerImage('images/real_estate_icons.png',
        new google.maps.Size(20, 32),
        new google.maps.Point(80,0),
        new google.maps.Point(10, 32));
      break;
    case 'Lot':
      var icon = new google.maps.MarkerImage('images/real_estate_icons.png',
        new google.maps.Size(20, 32),
        new google.maps.Point(100,0),
        new google.maps.Point(10, 32));
      break;
    };

    var shadow = new google.maps.MarkerImage('images/real_estate_icons.png',
      new google.maps.Size(40, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(10, 32));

    var shape = {
      coord: [0, 0, 20, 0, 20, 27, 15, 27, 10, 32, 5, 27, 0, 27, 0, 0],
      type: 'poly'
    };

    var marker = new google.maps.Marker({
      position: marker_latlng,
      map: window.map,
      title: real_estates[x].address,
      icon: icon,
      shape: shape,
      shadow: shadow
    });

    prepareMarker(marker, real_estates[x]);

    window.markers_keys.push(model + real_estates[x].id);
    window.markerClusterer.addMarker(marker);
  };
};

function prepareMarker(marker, real_estate) {
  google.maps.event.addListener(marker, 'click', function() {
    this.setAnimation(google.maps.Animation.BOUNCE);

    $.ajax({
      url: '/our_site/ads/real_estates/' + real_estate.id + '?model=' + model,
      type: 'GET',
      success: function() {
        marker.setAnimation(null);

        var icon = marker.getIcon();

        if (icon.origin.y == 0) {
          icon.origin.y += 32;
          marker.setIcon(icon);
        };
      }
    });
  });
};

What steps will reproduce the problem?
1. A new map object is assigned to "window.map".
2. A new marker clusterer object is assigned to "window.markerClusterer" using 
the previous map.
3. An array of markers is added dynamically to the "window.markerClusterer".
4. While being added, each marker defines its icon object according to its type.
5. While being added, each marker receives a click event listener, which 
handles its own unique function.
6. This function changes the area used by the icon object from the image sprite 
(a black and white version of itself), and then handles an ajax request through 
the latest JQuery.
7. When clicked, everything works fine, the icon becomes black and white and 
the request is handled nicely.
8. When zooming in or out, or clicking any cluster, any marker whose icon was 
changed disappears and by no means comes back, although it remains in the array.

This can be observed using MarkerClusterer V3 and MarkerClusterer Plus V3.

This can be observed with Firefox 11 and the latest Chromium, in Ubuntu 32 bits.

This doesn't happen if the code that changes the icon object is commented.

Expected result:
Markers whose icons was changed should still be showing after zooming in or out.

Actual result:
These markers disappears from the map, although they are not removed from the 
array, and still counts on the cluster.

Version: latest version of MarkerClusterer v3 and MarkerClusterer Plus v3.

Browser / Operating System:
Latest Firefox and Chrome / Ubuntu 11.04 32 bits.

*********************************************************
Tip: Star this issue (next to title) to receive notifications of status
changes against this issue, also used as a gauge for how many people are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by oliveira...@gmail.com on 11 Apr 2012 at 2:26

GoogleCodeExporter commented 9 years ago
Are the markers draggable?

Original comment by garylitt...@gmail.com on 21 Apr 2012 at 5:28

GoogleCodeExporter commented 9 years ago
No...
In the code above you can see how they are created. I just change the area of 
the image sprite, switching from a colored icon to a back and white version of 
itself.

I'm starring issue 167, which is pretty similar to this one. There, I wrote 
that I believe that we're talking about the same bug, and that it is not 
related specifically to the position property, since I observed the exact same 
behaviour changing the x property o google.maps.Icon.origin and when setting 
google.maps.Marker.animation to BOUNCE.

Original comment by oliveira...@gmail.com on 21 Apr 2012 at 7:03