Send additional parameters in a google maps event function

Question

I had this, works fine:

google.maps.event.addListener(marker, 'rightclick', function(event) {
    infowindow.close();
    marker.setMap(null);
    marker.solucionado = true;
    cant_markers--;
    cant_solucionados++;
});

But I want to do this:

google.maps.event.addListener(marker, 'rightclick', deleteMarker);

function deleteMarker(marker) {
    infowindow.close();
    marker.setMap(null);
    marker.solucionado = true;
    cant_markers--;
    cant_solucionados++;
});

marker it's currently out of the scope, there is a way to send the marker object as a parameter?

Dr.Molle · Accepted Answer · 2015-08-06 19:55:47Z

marker isn't out of scope, marker is the scope where the handler will be executed.

The scope of a handler added via addListener is always the object where the listener has been added to(first argument of addListener, it's marker in your code)

Simply use this to access the marker inside the handler:

function initialize() {

  var map = new google.maps.Map(document.getElementById("map-canvas"), {
      center: new google.maps.LatLng(0, 0),
      zoom: 1
    }),
    marker = new google.maps.Marker({
      map: map,
      position: map.getCenter()
    });
  google.maps.event.addListener(marker, 'rightclick', deleteMarker);

}

function deleteMarker() {
  this.setMap(null);
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

However, when you wan't to pass additional arguments to the handler it's possible too, use deleteMarker.call(or deleteMarker.apply)

Example:

function initialize() {

  var map = new google.maps.Map(document.getElementById("map-canvas"), {
      center: new google.maps.LatLng(1, 2),
      zoom: 1
    }),
    marker = new google.maps.Marker({
      map: map,
      position: map.getCenter()
    }),
    var1 = "it ",
    var2 = "work's";
  google.maps.event.addListener(marker, 'rightclick',
    function(e) {
      deleteMarker.call(this, //the scope of the handler...the marker
        e, //the original event
        var1, //additonal argument
        var2 //another argument
      );
    }
  );

}

function deleteMarker(event, v1, v2) {
  this.setMap(null);
  alert(v1 + v2 + '@' + event.latLng)
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map-canvas"></div>

WhiteHat · Accepted Answer · 2015-08-06 19:10:38Z

0

That's because you have overridden marker with the event argument.

try this...

google.maps.event.addListener(marker, 'rightclick', deleteMarker);

function deleteMarker(event) {
    infowindow.close();
    marker.setMap(null);
    marker.solucionado = true;
    cant_markers--;
    cant_solucionados++;
});

if you need to pass multiple parameters, you can do so as such...

google.maps.event.addListener(marker, 'rightclick', function(event) {
  deleteMarker(event, marker);
});

function deleteMarker(event, marker) {
    infowindow.close();
    marker.setMap(null);
    marker.solucionado = true;
    cant_markers--;
    cant_solucionados++;
});

edited Aug 6, 2015 at 19:10

answered Aug 6, 2015 at 18:38

WhiteHat

61.3k7 gold badges54 silver badges140 bronze badges

1 Comment

WhiteHat Over a year ago

but based on the code posted, you just need to change function deleteMarker(marker) { to function deleteMarker(event) {

Below the Radar · Accepted Answer · 2015-08-07 12:00:35Z

0

I suggest you to build your app with generic functions for such a general action as deleting a marker. At some moment you might want to delete a list of a markers simultaneously or delete a marker for other reason than a righ-click. For that, it's a better practice to create a function that handle all (or most of) situations than repeating your code.

google.maps.event.addListener(marker, 'rightclick', function(e){
    deleteMarkers([marker]);
});

function deleteMarkers(markers) {
    for (var i=0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
});

see doc: https://developers.google.com/maps/documentation/javascript/events#EventArguments

edited Aug 7, 2015 at 12:00

answered Aug 6, 2015 at 18:37

Below the Radar

7,65511 gold badges70 silver badges146 bronze badges

Collectives™ on Stack Overflow

Send additional parameters in a google maps event function

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related