javascript function that takes parameter is called on page load

Question

for(i = 0; i < locations.length; i++) {
  currentLocation = locations[i];

  var mapMarker = new google.maps.Marker ({
    position: locations[i][0],
    map: map,
    label: labels[i],
    title: locations[i][1],
    zoom: 18
  })

  mapMarkers.push(mapMarker);
  mapMarkers[i].addListener('click', markerClick(currentLocation)); 
}


function markerClick(location) {
  console.log("you clicked " + location)
}

The function markerClick is being called each time it is added to an element. How can i make it so it is only called when the element is clicked? i read in another answer herethat leaving out the () would fix this, but I need to pass a paramater and am not sure how to do this. thanks for any help

do not call the function :) You are calling it and assigning what it returns to the click — epascarello, Dec 12 '17 at 20:15
The `this` in the click listener function is the marker. `this.getPosition()` will give you it's position. — geocodezip, Dec 12 '17 at 20:48

score 1 · Accepted Answer · answered Dec 12 '17 at 23:41

One option would be for your markerClick function to return a function.

function markerClick(location) {
  return function(evt) {
    console.log("you clicked " + JSON.stringify(location));
  }
}

proof of concept fiddle

code snippet:

var locations = [
  [{lat: 42,  lng: -72}, "Here"],
  [{lat: 42.1,lng: -72.1}, "There"]
];
var mapMarkers = [];

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(42, -72),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  for (i = 0; i < locations.length; i++) {
    currentLocation = locations[i];

    var mapMarker = new google.maps.Marker({
      position: locations[i][0],
      map: map,
      // label: labels[i],
      title: locations[i][1],
      zoom: 18
    })

    mapMarkers.push(mapMarker);
    mapMarkers[i].addListener('click', markerClick(currentLocation));
  }
}

function markerClick(location) {
  return function(evt) {
    console.log("you clicked " + JSON.stringify(location));
  }
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

score 0 · Answer 2 · answered Dec 12 '17 at 20:35

When you add the listener, you're calling the markerClick() function rather passing it as a variable. Here's how to fix it:

//using a separate function like this avoids some nasty 
//problems with callbacks and closures in for loops
function addMapMarkerClickListener( mapMarker, location ) {
 
   //we use an anonymous function as the listener
   mapMarker.addListener('click', function() {
      markerClick( location );
   });
}

for(i = 0; i < locations.length; i++) {
  currentLocation = locations[i];

  var mapMarker = new google.maps.Marker ({
    position: locations[i][0],
    map: map,
    label: labels[i],
    title: locations[i][1],
    zoom: 18
  })

  mapMarkers.push(mapMarker);

  addMapMarkerClickListener( mapMarkers[i], currentLocation );
}


function markerClick(location) {
  console.log("you clicked " + location)
}

thanks, i didnt realize i was calling it instead of passing it — KK555, Dec 13 '17 at 19:36

javascript function that takes parameter is called on page load

2 Answers2