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.

Answer 1

The problem is

1. you are trying to add the listener to the marker array which is a collection of markers.
2. 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.