Cordova-plugin-googlemaps: Remove specific marker

[aguilacontrol]

Hello I need to update a marker position, but i cant, this is my code. I`ve tried to put marker.remove() instruction but nothing happens.

              $(".startButton").click(function(){

                    /*

                    marker_tipe_a.remove();  //  I need a function like this:

                    marker.remove();  // Nothing happens 
                    map.marker.remove();  //nothing happens

                    */

                    map.getCameraPosition(function(camera){
                        map.addMarker({
                            'position': new plugin.google.maps.LatLng(camera.target.lat,camera.target.lng),
                            'icon': 'www/img/start.png'
                        }, function(marker) {

                        });
                    });

                })

                $(".endButton").click(function(){
                    map.marker.remove();

                })

Please help

[TheMassassian]

Hi there,

to remove a specific marker, you need to have the marker saved in a variable in order to remove it.
You can push the marker into an array or set a variable in the marker callback function.

Example:

map.addMarker({
    'position': markerloc,
    'title': title,
    'markerId' : id,
    'icon': icon
}, function(marker) {
    marker.addEventListener(plugin.google.maps.event.INFO_CLICK, function() {   
        markerVariable = marker; 
    });
}); 

$(".endButton").click(function(){
    markerVariable.remove();
});

OR

map.addMarker({
    'position': markerloc,
    'title': title,
    'markerId' : id,
    'icon': icon
}, function(marker) {
    marker.addEventListener(plugin.google.maps.event.INFO_CLICK, function() {   
        markerArray.push(marker); 
    });
}); 

$(".endButton").click(function(){
    markerArray[pos].remove();
});

untested, but should work

[aguilacontrol]

Thanks for your response. This is what I get.

1st Method:

1. marker is added succesfully!
   But when i want to delete this message appears.
   12-03 10:00:08.279 22347-22347/com.aguilacontrol.citytaxi I/chromium﹕ [INFO:CONSOLE(504)] "Uncaught ReferenceError: markerVariable is not defined", source: file:///android_asset/www/index.html (504)

So if I define variable such like this:

var markerVariable;

I´ve get this error:
"Uncaught TypeError: Cannot call method 'remove' of undefined", source: file:///android_asset/www/index.html (504)

I think i need instantiate a Google Maps marker or something like that.

I`m developing and app like this

When i click on A button it push a icon-A , when push on B button, it will push icon-B But if I change the camera position and press the A button again I WANT to clear the previuos icon-A and move it to the new position, and the same with the B button.

Thanks in advance for your help

[TheMassassian]

The markerVariable needs to be global in order to remove it. If it is global and you try to remove it before it was set you will get an error.

try making the remove in an if clause

if (markerVariable !== undefined) {
 markerVariable.remove();
}

[aguilacontrol]

Hello, I`ve defined globally in the top of my script, but allways says that markerVariable has not remove() method.

So...

I made some test and finally i can do what i'm looking for.

$(".startButton").click(function(){
    map.getCameraPosition(function(camera){

        map.addMarker({
            'position'  : new plugin.google.maps.LatLng(camera.target.lat,camera.target.lng),
            'icon'      : 'www/img/start.png'
        }, function(marker){

            $(".startButton").click(function(){
                marker.remove();
            });
        });
    });
})

$(".endButton").click(function(){

    map.getCameraPosition(function(camera){

        map.addMarker({
            'position'  : new plugin.google.maps.LatLng(camera.target.lat,camera.target.lng),
            'icon'      : 'www/img/end.png'
        }, function(marker){

            $(".endButton").click(function(){
                marker.remove();
            });
        });
    });
});

Now, I can change position for a specific marker.

[wf9a5m75]

Thank you for supporting @TheMassassian

Congratulation, @aguilacontrol

[AbdullahNasir]

@aguilacontrol, how did you add current location marker on the map ?

[samuelaj1]

Set my location to true on the map
e.g. GoogleMaps.create('map_canvas',{
controls:{
myLocation:true
}
}

[ragavanrandy]

i too have the same problem.
the following are properties of the class,

markers = [{lat:40.730610,lng: -73.935242,title:'marker 1'},{lat:35.5175,lng: 86.5804,title:'marker 2'}];
arrayMarkers:Marker[];

and the following are the methods of the class,

//Place markers on the map
  addMarkers(){
    if (this.markers != null || this.markers != undefined) {
      this.markers.forEach((marker) => {
        this.map.addMarker({
          position: new LatLng(marker.lat,marker.lng),
          title: marker.title,
          animation: 'DROP',
        }).then((markerRef) => {
          this.arrayMarkers.push(markerRef);
          markerRef.on(GoogleMapsEvent.MARKER_CLICK)
            .subscribe(() => {
              alert(marker.getTitle);
            });
        });
      });
    }
  }

and

//remove markers from the map
  removeMarkers() {
    if(this.arrayMarkers !== undefined){
      this.arrayMarkers.forEach(marker => {
        marker.removeEventListener(GoogleMapsEvent.MARKER_CLICK);
        marker.remove();
      });
    }
  }

the addMarkers method working and add markers on map. But, the removeMarkers method not seems to remove the markers.