Google Maps marker click event not firing

Question

I'm trying to create a Google Maps listener for click event on a marker. The issue is that the event is not firing. My code below shows how I initialize the map and add markers to the map. I believe that the event listener has to be added in the initialization.

//initializing my variables
var marker = []; //final markers that wil go on the map 

//this function loads the map on to the page. 
function initialize() {
    var mapOptions = {
        center: {
            lat: 0,
            lng: 0
        },
        zoom: 2
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    //listener for clicks on markers
    google.maps.event.addListener(marker, 'click', markerClick);
    //listener that listens for the map to load before calling the drop function
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        //this part runs when the mapobject is created and rendered
        google.maps.event.addListenerOnce(map, 'idle', function() {
            //this part runs when the mapobject shown for the first time
            drop();
        });
    });
}

//drop function
function drop() {
    for (var i = 0; i < pictureLocations.length; i++) {
        setTimeout(function() {
            addMarker();
        }, i * 200);
    }
}


//add marker function
function addMarker() {
    marker.push(new google.maps.Marker({
        position: pictureLocations[iterator],
        map: map,
        draggable: false,
        animation: google.maps.Animation.DROP,
        id: iterator
    }));
    iterator++;
}

When I click on markers nothing happens. I have an alert in the click function to cause a javascript alert.

Look at the order of things. When you add the Listner, marker does not exist yet. Also, marker is a terrible name for an array of markers. It is terribly confusing. — Emmanuel Delay, Dec 08 '14 at 15:35
possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Dec 08 '14 at 15:37
probably wouldn't hurt to look at [the examples in the documentation](https://developers.google.com/maps/documentation/javascript/infowindows#open) — geocodezip, Dec 08 '14 at 15:39
@EmmanuelDelay Thanks for the comment! I've places the listener after the drop function call and also inside the addMarker function to no avail. The listener doesn't seem to be hooking. — deadsix, Dec 08 '14 at 15:39
@geocodezip Thanks for the link I've been looking at the documentation and I understand what is wrong but just don't know how to execute a fix. The listener has to be added after the creation of the marker. — deadsix, Dec 08 '14 at 15:42
Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates your issue or look at the [answer to the linked question](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example). What is `markerClick`? You code as it exists won't work, as marker isn't defined when you create the click listener (as Emmanuel Delay indicated). — geocodezip, Dec 08 '14 at 15:49

sabotero · Accepted Answer · 2014-12-08T20:07:11.583

The problem is

you are trying to add the listener to the marker array which is a collection of markers.
you should add the listener to each individual marker and then push the marker to the array.

Try this :

    //initializing my variables
    var marker = []; //final markers that wil go on the map 

    //this function loads the map on to the page. 
    function initialize() {
        var mapOptions = {
            center: {
                lat: 0,
                lng: 0
            },
            zoom: 2
        };

        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        //listener that listens for the map to load before calling the drop function
        google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
            //this part runs when the mapobject is created and rendered
            google.maps.event.addListenerOnce(map, 'idle', function() {
                //this part runs when the mapobject shown for the first time
                drop();
            });
        });
    }

    //drop function
    function drop() {
        for (var i = 0; i < pictureLocations.length; i++) {
            setTimeout(function() {
                addMarker();
            }, i * 200);
        }
    }

// define markerClick wich was not defined in your code
function markerClick(){
    alert('click in the marker'):
}

    //add marker function
    function addMarker() {
        var _marker = new google.maps.Marker({
            position: pictureLocations[iterator],
            map: map,
            draggable: false,
            animation: google.maps.Animation.DROP,
            id: iterator
        });
         //listener for clicks on markers
        google.maps.event.addListener(_marker, 'click', markerClick);
        marker.push(_marker);
        iterator++;
    }

Besides that, you could consider to read more about the google.maps.event applying to the google.maps.Map object you will find that the idle event is not what you're thinking it is.

Yes! I noticed this a couple hours after I posted. I fixed it in my code and it looks very similar to your answer. — deadsix, Dec 08 '14 at 20:55

Google Maps marker click event not firing

1 Answers1