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
possible duplicate of Google Maps JS API v3 - Simple Multiple Marker Example — geocodezip
probably wouldn't hurt to look at the examples in the documentation — geocodezip
@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. — Matt
Please provide a Minimal, Complete, Tested and Readable example that demonstrates your issue or look at the answer to the linked question. 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

sabotero sabotero · Accepted Answer · 2014-12-08T19:48:09

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.

Google Maps marker click event not firing

1 Answers