Bug: marker locates when map.addMarker({ visible: false })

[alexislg2]

Hey I have a program running with cordova. Every 10 seconds I receive a list of 50 locations that I plot using markers.
Each time I receive a new list I remove the former markers with marker.remove() and then plot the new ones.
But my program gets slower and slower. After 1~2 minutes it is not responding at all. Is that normal? isn't suppose marker.remove() clear the memory ?
How can I handle this ?

[wf9a5m75]

In general programming, your algorithm is not better way.
You need to consider memory anytime in this case.

And PhoneGap / Cordova execute each commands as pipeline.
It means if you call "map.addMarker()" and "marker.remove()" a lot, it gets slower and slower.

The better way I think is:

1. Create 50 markers only at first time
2. change the position all markers each time. (Recycle the markers)
3. Use the same event listener for all markers

For example using async.js:

function onPageLoaded(map) {
  var dummy = [];
  for (var i = 0; i < 50; i++) 
    dummy.push(i);

  async.map(dummy, function(i, callback) {
    map.addMarker({
      visible: false
    }, function(marker) {
      //Listen the photo_change event
      map.on("photo_change_" + i, function(photo) {
        var position = new plugin.google.maps.LatLng(photo.latitude, photo.longitude);
        marker.setPosition(position);

        marker.setVisible(true);
        marker.set("photo_url", photo.photo_file_url);
      });

      //Bind the same event listener for all markers
      marker.on(plugin.google.maps.event.MARKER_CLICK, function() {
        openPhoto(map, marker.get("photo_url"));
      });
      callback(null, marker);
    });
  }, function(markers) {
    setInterval(function() {
      map.getVisibleRegion(function(latLngBounds) {

        // Get 50 photos from Panoramio
        $.ajax({
          url: "http://www.panoramio.com/map/get_panoramas.php",
          type: "GET",
          dataType: "jsonp",
          async: true,
          data: {
            "order": "popularity",
            "set": "public",
            "from": 0,
            "to": 50,
            "maxx": latLngBounds.northeast.lng,
            "maxy": latLngBounds.northeast.lat,
            "minx": latLngBounds.southwest.lng,
            "miny": latLngBounds.southwest.lat
          },
          success: function(json){

            var photos = json.photos;
            if (!photos) {
              return;
            }

            photos.forEach(function(photo, i) {
              map.trigger("photo_change_" + i, photo);
            });
          } 
        });
      });
    }, 10000);

  });
}
function openPhoto(map, photo_url) {
  var photoDiv = $("<div>").css({
    "position": "fixed",
    "left": "10%",
    "top": "10%",
    "right": "10%",
    "bottom": "10%",
    "z-index": 1001,
    "background-image": "url('" + photo_url + "')",
    "background-size": "cover",
    "background-position": "center"
  });
  photoDiv.appendTo("body");

  var backGround = $("<div>").css({
    opacity: 0.7,
    backgroundColor: "black",
    "position": "fixed",
    "left": 0,
    "top": 0,
    "right": 0,
    "bottom": 0,
    "z-index": 1000
  });

  backGround.one("click", function() {
    $(backGround).remove();
    $(photoDiv).remove();
    map.setVisible(true);
  });
  backGround.appendTo("body");

  map.setVisible(false);
}

[alexislg2]

Thanks for your answer! I know this is not good algorithm, it was just for running a test on markers. I just wanted to be sure that adding then removing markers was not memory consuming.
In my real applications I want to plot all the shops near the user, which means the number of markers will be variable. What do you suggest?

• Creating a given number large enough of markers at startup (eg 200) set them as invisible and only use the ones I need or
• add a new marker each time a shop is in the promity range and remove once it's out of the zone.

[wf9a5m75]

Creating a given number large enough of markers at startup (eg 200) set them as invisible and only use the ones I need
is better.

How many shops totally do you have?
If you have a bunch of points (such as over 1000), how about the below way.

---

Prepare the point plotted images, then load them based on the area.
Use plugin.google.maps.event.MAP_CLICK event to detect the click action.

map.on(plugin.google.maps.event.MAP_CLICK, function(click_latLng) {
  var hitShop = shops.filter(function(shop) {
    if (shop.latlngBounds.contain(click_latLng)) {
      return true;
    }
    return false;
  });
});

[alexislg2]

Thank you. In fact I have a very large number of point (>100k) so I have a server script that send only those in the user proximity. I implemented you idea of initializing an array of invisible markers.
It works well.
The only issue I have is that when I do map.addMarker({visible:false}) the marker is visible at (0,0). I have to use marker.setVisible(false); to make it invisible. But we can see it during a very short time at startup

[wf9a5m75]

Thank you for letting me know. I will fix it in next release.