CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
RIDER
RIDER

Reputation: 159

I am unable to clear markers using setMap(null) or setVisible(false)

Essentially, I want to let a user open up a map, create a marker that has fusion tables form in the infowindow, and let the user submit the form, and close the marker.

The first issue I am dealing with is that during the 'click' event, it appears that 2 markers/infowindows are created. (One can drag the top market to see that there is another one below it.) I am not sure why.

But the bigger problem is that I am not sure how to close existing markers/infowindows that a user created.

Here is the code on how I am adding a marker to the map:

        // click listenrer that places a marker
     google.maps.event.addListener(map, 'click', function(event) { 
              placeMarker(event.latLng);
        });

      function placeMarker(location) {
          var newmarker = new google.maps.Marker({
         position: location,
       draggable: true,
        map: map,
     });
     var infowindow2 = new google.maps.InfoWindow({
          content: '<iframe width=500 height=300 scrolling=yes frameborder=no src=https://docs.google.com/spreadsheet/embeddedform?formkey=dGdMZjg1T2duck55UjVHNGx2MHRlN0E6MQ&entry_0=Test1&entry_1='+ location.lat() +','+ location.lng() +'&entry_2=test3%22></iframe>' 
        });

    infowindow2.open(map,newmarker);
    }

And here is the code that fails to clear the markers:

        // doesn't seem to work... 
    //I thought this is all that is needed for a market to disappear.  Neither setMap(null) or setVisible(false) works.  It doesn't appear that this listener is even triggered upon a double click.  
     google.maps.event.addListener(marker, "dblclick", function() {
        newmarker.setMap(null);
        marker.setVisible(false);
    });

I used a 'dblclick' listener to test if using two 'click' listeners is the problem. But as far as I can tell, nothing happens on double click either.

Any help or guidance on this would be greatly appreciated.

enter link description here

Upvotes: 0

Views: 6120

Answers (1)

Hannah Schultz
Hannah Schultz

Reputation: 573

You do have multiple issues with your code, and fixing the issue you're pointing out isn't quite enough, but here's your issue:

Your "dblclick" event is only being added to an undefined value, "marker". The "dblclick" listener should be moved inside your placeMarker function, and it should be changed to look like this:

google.maps.event.addListener(newmarker, "dblclick", function() {
    alert('I clicked the map.');
    this.setMap(null);
    this.setVisible(false);
});

EDIT:

There's also an issue where if you click the map once, TWO markers get created. Therefore, even with the above fix, you still have to double-click twice in order to remove the marker. This is because your initialize function is being called twice: once from body-onload and once from the google maps domEvent for window-onload.

Here's a jsfiddle with both issues fixed:

http://jsfiddle.net/vdmmJ/

Upvotes: 4

Related Questions