Function invocation in javascript

Question

I am working on a small webapp that uses google maps api.

At one point I wanted to place markers and attach event listener to it.

//initialization of infowindow and markers
var points = [];
var infowindow = new google.maps.InfoWindow({
    content: "1234"
});

function addInfoWindow(point){
    infowindow.setContent(point.position + " " + point.title),
    infowindow.open(map, point);
}

Here's the problem, when I initiate markers with

//initialize markers
{% for marker in mapMarkers %}
    points[{{ marker.id }}] = new google.maps.Marker({
        position: new google.maps.LatLng({{ marker.geometry.y }},
            {{ marker.geometry.x }}),
        map: map,
        title: '{{ marker.name }}',
        clickable: true
    });

    //add event llistener for infowindow
    points[{{ marker.id }}].content = "abc"
    //look here!!
    google.maps.event.addListener(points[{{ marker.id }}], 'click',
        addInfoWindow(points[{{ marker.id }}])
    );
{% endfor %}

It would instantly show infowindow from the first marker. The other markers were placed but clicking on them never produce any changes.

While if I do this

    google.maps.event.addListener(points[{{ marker.id }}], 'click',
    function(){
        addInfoWindow(points[{{ marker.id }}])
    });

Stuffs works perfectly fine, infowindow only appears when marker was clicked.

My question: why is there a need to use

function(){}

instead of directly using addInfoWindow. I figured it might be an issue of function invocation where addInfoWindow calls the global variable, but if that's the case, the infowindow that shows up should display information from the last marker instantiated right?

Because addInfoWindow needs parameters. If you just used the function reference, it wouldn't receive any parameters. — Jeremy J Starcher
– Jeremy J Starcher, Commented Nov 5, 2012 at 3:04

raina77ow · Accepted Answer · 2012-11-05 03:02:35Z

2

Because you need to assign a function as a click handler - and you do that with...

google.maps.event.addListener(points[{{ marker.id }}], 'click',
function(){
    addInfoWindow(points[{{ marker.id }}])
});

... as this will create an anonymous function (with call to addInfoWindow in its body).

But with this...

google.maps.event.addListener(points[{{ marker.id }}], 'click',
    addInfoWindow(points[{{ marker.id }}])
);

... you try to assign the result of addInfoWindow call as event handler, not the function itself. Of course, it doesn't work.

answered Nov 5, 2012 at 3:02

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function invocation in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related