Sencha Touch 2 remove Google map Markers

Question

i'm trying to remove all the markers from a google map using ExtJS. I'm performing a setCenter() operation (i need to remove the old center from the map) and also i want to add a new marker in the new center.

As i know, to get the google map instance i need to perform a getMap() over the map container, ie map.getMap()

I tried with clearMarkers();, deleteMarkers(); and markers = []; but neither works. The google map object looks really weird on the Chrome Developer tools utility, at least for me.

With the addition, same problem. I'm doing that:

new google.maps.Marker({
                            map       : map.getMap(),
                            position  : new google.maps.LatLng(location.lat, location.lng),
                            title     : 'Drag Marker To New Position',
                            animation : google.maps.Animation.DROP,
                            draggable : true
});

Any help is appreciated! Thanks.

Answer 1

It's very simple. To remove a marker from the map, call the setMap() method passing null as the argument.

marker.setMap(null);

Note that the above method does not delete the marker. It simply removes the marker from the map. If instead you wish to delete the marker, you should remove it from the map, and then set the marker itself to null .

If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers . You can delete the markers by removing them from the map and then setting the array's length to 0, which removes all references to the markers.

Find an example here View example (marker-remove.html)

Read more about Google Maps Tutorial - Remove a marker

Answer 2

Finally i get a solution for that (maybe it's not the better way, but it works)

I decided to have a global variable that references the marker that i have to put over the map.

To define a global variable in sencha i use this approach:

Ext.application({
    name: 'SIGCC',
    marker: null,
    ....

    ....

});

I'm using a custom class to get an AutocompleteTextField, and when the user taps a suggested location the previous marker has to be removed and a new one is placed over the google map. Also i have to recenter the map in the new location

recenterMap: function(location){
    //addressMap is the id of the xtype map component
    var map = Ext.getCmp('addressMap');
    map.setMapCenter({ latitude: location.lat, longitude: location.lng });
    if (SIGCC.app.marker){
      SIGCC.app.marker.setMap(null);
    }
    SIGCC.app.marker = new google.maps.Marker({
                                map       : map.getMap(),
                                position  : new google.maps.LatLng(location.lat, location.lng),
                                title     : 'Drag Marker To New Position',
                                animation : google.maps.Animation.DROP,
                                draggable : true
    });
    //My map is hidden before de users tap action, so i have to unhide them
    map.setHidden(false);

  },

As you can see, this portion of code references the global variable defined previously. Hope this helps someone.