Question

I’m using Google gmap API for showing Google maps in my Phonegap application. The gmap is working fine.

But, my requirement is to change the markers as per user selection and at first I am showing all the markers. from second time onwards I need to show as user chooses. I am using Json data

Below is the Gmap code:

function showMap(data) {
    $('#map_canvas').gmap(
                        { 'center' : initialLocation,
                          'zoom' : 12,
                          'mapTypeControl' : false,
                          'navigationControl' : false,
                          'streetViewControl' : false
                        })
                        .bind('init', function(evt, map) {
                            if (data.Response.ShopListInfo instanceof Array) {
                                 $.each( data.Response.ShopListInfo, function(i, marker) {
                                              latitude = marker.Latitude;
                                              longitude = marker.Longitude; 
                                              displayMarkers(latitude, longitude, marker);
                                 });
                            }else{
                                latitude = data.Response.ShopListInfo.Latitude;
                                longitude = data.Response.ShopListInfo.Longitude; 
                                displayMarkers(latitude, longitude, data.Response.ShopListInfo);
                            }
                }); 
}

The problem is from second call Onwards The “bind” method is not executing.

Answer 1

We just need to clear the Markers from the second time onwards and call addMarkers Method seperately just like below.

$('#map_canvas').gmap('clear', 'markers');
                if (data.Response.ShopListInfo instanceof Array) {
                    $.each( data.Response.ShopListInfo, function(i, marker) {
                          latitude = marker.Latitude;
                             longitude = marker.Longitude; 
                             displayMarkers(latitude, longitude, marker);
                    });
                }else{
                    latitude = data.Response.ShopListInfo.Latitude;
                    longitude = data.Response.ShopListInfo.Longitude; 
                    displayMarkers(latitude, longitude, data.Response.ShopListInfo);
                }