CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
P Srinivas Goud
P Srinivas Goud

Reputation: 896

why setMap(null) is not working google maps api v3?

I am using google maps api 3.9 .In app user can add marker or delete marker.when user click on map an Infowindow will be displayed.in which user can enter name,lat,long and click the save image as follows:

google.maps.event.addListener(map, 'click', function(event) {

  point = new google.maps.Marker({
    position: event.latLng
    , map: map
    , icon: 'resource/image/mapIcons/point.png'
    , id: id
    , type:"point"
  });

  type = point.type;
  newPoint = true;
  existingPoint = false;
  markerObj = this;

  inputInfowindow.setContent("<table style='width:92%;' id='inputTable'>" +
                             "<tr> <td>point</td> </tr>" +
                             "<tr> <td><input class='infoInput' type='text' id='name' placeholder='name'/> </td> </tr>" +
                             "<tr> <td><input class='infoInput'type='text' id='lat' placeholder='latitude'/></td> </tr>" +
                             "<tr> <td><input class='infoInput'type='text' id='lon' placeholder='longitude'/></td> </tr>" +
                             "<tr><td><input type='image' src='resource/image/mapIcons/save.png' onclick='save()' class='saveImage' alt='save'/> </td></tr>");

  event1 = event.latLng;
  currentMarker = point;
  inputInfowindow.open(map,point);

});

marker saved in DB. when user cliclks on delete button follwing method ll be called:

function deleteMarker(id,rev) {
  var marker  = markerObj;
  markerObj = undefined;
  var x = confirm("are you sure to delete marker?");
  if(x){
    deleteLocations(id,rev);//removes marker details from DB
    if(marker){
      console.log(marker);
      marker.setMap(null);
    }
  }
}

but at marker.setMap(null); marker is removed from map still its on map.I checked with console.log(marker); marker object coming properly,no errors on console.i went through lot of googling but no result.Please help about this.

Upvotes: 8

Views: 48562

Answers (7)

th3coop
th3coop

Reputation: 438

Vue + Google Maps Markers

If the docs instructions weren't working for you and:

  • you're working with Vue
  • your Markers are in a reactive object
    • presumably passing your Marker or storage to vue.ref would cause the same issue?

The Problem(?)

I haven't taken the time to figure out the "why" (nor will I at this point (angry head against table)) BUT the Markers being stored inside a Vue Reactive object will break things some how.

Example Broken Code

const state = reactive({ mymarker : new google.maps.Marker(...) });
// yes I tried state.mymarker.value.  I get an error.
state.mymarker.setMap(null); // Marker is left on map

Fix

I had to make a secondary storage container for my Markers that was never passed to vue.reactive.

Example Not Broken Code

const state = reactive({}); // Keep are reactive things here
// I don't need my Markers to be reactive anyway
const nonReactiveState = { mymarker : new google.maps.Marker(...) }
nonReactiveState.mymarker.setMap(null); // Marker is removed from map

Upvotes: 0

binhdocco
binhdocco

Reputation: 113

For future people, using marker.setVisible(false); worked for me: marker.setVisible(false); //this line works marker.setMap(null); marker.setPosition(null); marker = null;

Upvotes: 3

Vahid Montazer
Vahid Montazer

Reputation: 1311

I had same problem. You should call these methods before markers[index].setMapp(null) : 

map.setCenter(desMarker[index].getPosition());
desMarker[index].setPosition(null);

after these call:

markers[index].setMapp(null)

Upvotes: 2

Noah Wilson
Noah Wilson

Reputation: 33

I had a similar error, I'm not sure if my solution applies to your case, nevertheless.. I set up my code so that when my page loaded the map would be filled up with any markers from coordinates denoted in my database. Then I allowed the user to add more points to the database and then added a marker to the user's selected location on the map.

What I didn't realize is that any time a coordinate was changed or created in my database my code was re-adding markers to all the coordinates on my map. So anytime I created a point I was both manually adding a marker to the coordinates and my database was adding a marker to the coordinates. So when I thought my code was broken what was really happening is I was deleting one of two points in the same location.

So I don't know exactly how you're pulling in coordinates and markers from you database but it's worth looking into.

Upvotes: 0

Seain Malkin
Seain Malkin

Reputation: 2303

In the map click event you assign this to the markerObj. Though this refers to the map object and not the marker object.

Change it to

markerObj = point;

and it should work as expected.

Upvotes: 0

Shiridish
Shiridish

Reputation: 4962

From the documentation-

To remove an overlay from a map, call the overlay's setMap() method, passing null. Note that calling this method does not delete the overlay; it simply removes the overlay from the map. If instead you wish to delete the overlay, you should remove it from the map, and then set the overlay itself to null.

so after the marker.setMap(null) you should also write marker=null

Update1-

function deleteMarker(id,rev) {
  var x = confirm("are you sure to delete marker?");
  if(x)
  {
    deleteLocations(id,rev);//removes marker details from DB
    if(markerObj)
    {
       console.log(markerObj);
       markerObj.setMap(null);
       markerObj=null;
    }
  }
}

Update 2-

Here is a simple demo that works. See the code and check where your code is wrong. Probably some variable scope issue exists in your code.

WORKING DEMO

Upvotes: 13

Marcelo
Marcelo

Reputation: 9407

marker.setMap(null) does not delete the object, it only hides it. To delete it do marker = null;

Upvotes: 2

Related Questions