Question

I have jquery mobile site, trying to add a gmap (v3) with dynamic markers:

 bindMap: function () {

    var markers = mapArray;  //global var with coordinates

    $('#mapContent').gmap({ 'callback': function () {
        var self = this;           
        $.each(markers, function (i, m) {
            if (markers[i][0] && markers[i][1]) {

                self.addMarker({ 'position': new google.maps.LatLng(markers[i][0], markers[i][1]), 'bounds': true }).click(function () {
                    self.openInfoWindow({ 'content': markers[i][2] }, this);
                });
            }
        });
    }
    });

} 

It loads me a map with markers, but once I change markers and go back to the same code to display this map, it skips the call back function and does not render a fresh map with new markers. I tried to call $('#mapContent').gmap('refresh') before or $('#mapContent').gmap('clear', 'markers'), still doesnt display new markers..

Answer 1

Im not too sure what you mean ‘go back to the same code’ but cant you reuse the same map object.

I would have a method that creates the map and a method that adds/refreshes markers

function addMarkers(markers, clearOld) {

   if(clearOld) $('#mapContent').gmap('clear', 'markers');

   $.each(markers, function(i, m) {
      $('#mapContent').gmap('addMarker', {
         'position': new google.maps.LatLng(m.lat, m.lng),
         'bounds':true,
         'id' : m.id,
         'icon' : 'img/marker.png'
     },function(map,marker) {
         $(marker).click(function(){
           //do something
         });
     });
   });

}

So just reuse the map and call addMarkers when you want to add new markers to the map