How to know which marker was clicked GoogleMaps

Question

I am doing a small HTML5 project with Google Maps JavaScript API v3 using JavaScript, CSS and HTML.

In this small app, my objective is to add markers to the map, and onc

Answer 1

I have finally found a solution which I like (different from the one I accepted).

After a lot of research, I found this website: https://www.toptal.com/javascript/interview-questions

And I read question number 10:

In what order will the numbers 1-4 be logged to the console when the code below is executed? Why?

(function() {
    console.log(1); 
    setTimeout(function(){console.log(2)}, 1000); 
    setTimeout(function(){console.log(3)}, 0); 
    console.log(4);
})();

If you want to know the answer, feel free to read the original source.

After reading this, I came up with my version using scopes:

var markersArray = [];

// Adds a marker to the map and push to the array.
function addMarker(location) {
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        draggable: true,
        animation: google.maps.Animation.DROP,
        label: markersArray.length + "",
        title: "Marker Number " + markersArray.length
    });

    markersArray.push(marker);
    marker.addListener('click', (function(index) {
        return function() {
            clickMarkerEvent(index);
        };
    })(markersArray.length - 1));
}

//listeners
function clickMarkerEvent(index) {
    alert(index);
}

This is what I was trying to do in the first place, but I have forgotten a few details.

Still, I have decided to accept the other question for its simplicity.

Here is my complete project. I added some more features like custom controls for the markers. It is not perfect, by all means, but I think it is a nice starter point for anyone interested.

'use strict'

/*global google*/

/*
	Best practices: For the best user experience, only one info window should be 
	open on the map at any one time. Multiple info windows make the map appear 
	cluttered. If you only need one info window at a time, you can create just 
	one InfoWindow object and open it at different locations or markers upon map
	events, such as user clicks. If you do need more than one info window, you 
	can display multiple InfoWindow objects at the same time.
*/
var infowindow;
var contentString;

var lastMarkerClicked;
var markersArray = [];

var map;

//	Initializes the map with a marker
function initMap() {

	var myLatLng = {
		lat: -25.363,
		lng: 131.044
	};

	map = new google.maps.Map(document.getElementById('map'), {
		zoom: 4,
		center: myLatLng
	});

	// This event listener calls addMarker() when the map is clicked.
	google.maps.event.addListener(map, 'click', function(event) {
		addMarker(event.latLng);
	});

	addMarker(myLatLng);
}

// Adds a marker to the map and push to the array.
function addMarker(location) {
	var marker = new google.maps.Marker({
		position: location,
		map: map,
		draggable: true,
		animation: google.maps.Animation.DROP,
		label: markersArray.length + "",
		title: "Marker Number " + markersArray.length
	});
	
	markersArray.push(marker);
	marker.addListener('click', (function(index) {
		return function() {
			clickMarkerEvent(index);
		};
	})(markersArray.length - 1));
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
	for (var i = 0; i < markersArray.length; i++) {
		if(markersArray[i] !== null)
		setMapOnMarker(i, map);
	}
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
	setMapOnAll(null);
}

// Shows any markers currently in the array.
function showMarkers() {
	setMapOnAll(map);
}

/*	
	Deletes all markers in the array by removing references to them.
	Note that the above method does not delete the marker. It simply removes the 
	marker from the map. If instead you wish to delete the marker, you should remove 
	it from the map, and then set the marker itself to null.
	https://developers.google.com/maps/documentation/javascript/markers#remove
*/
function deleteMarkers() {
	clearMarkers();

	for (var i = 0; i < markersArray.length; i++) {
		if(markersArray[i] !== null)
			markersArray[i] = null;
	}
	
	markersArray = [];
}

// Sets a marker with the given map
function setMapOnMarker(markerIndex, map) {
	markersArray[markerIndex].setMap(map);
}

// Hides a single marker
function hideMarker(markerIndex) {
	setMapOnMarker(markerIndex, null);
}

// Deletes a marker. Hides it first.
function deleteMarker(markerIndex) {
	hideMarker(markerIndex);
	markersArray[markerIndex] = null;
}

//listeners
function clickMarkerEvent(index) {

	lastMarkerClicked = markersArray[index];

	if (lastMarkerClicked.getAnimation() !== null)
		lastMarkerClicked.setAnimation(null);
	else 
		lastMarkerClicked.setAnimation(google.maps.Animation.BOUNCE);

	contentString = '
' +
		'
' +
		'
' +
		'
Marker Info
' +
		'
' +
		'Locatoin: 
' + lastMarkerClicked.getPosition() + '
' +
		'Title:  
' + lastMarkerClicked.getTitle() + '
' +
		'Hide Marker' +
		'Delete Marker' +
		'
' +
		'
';

	if (infowindow !== null && typeof infowindow !== 'undefined')
		infowindow.close();

	infowindow = new google.maps.InfoWindow({
		content: contentString,
		maxWidth: 200
	});
	infowindow.open(map, lastMarkerClicked);
}

function deleteMarkerClickEvent() {
	deleteMarker(markersArray.indexOf(lastMarkerClicked));
}

function hideMarkerClickEvent() {
	hideMarker(markersArray.indexOf(lastMarkerClicked));
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#map {
	height: 100%;
}

#floating-panel {
	position: absolute;
	top: 10px;
	left: 25%;
	z-index: 5;
	background-color: #fff;
	padding: 5px;
	border: 1px solid #999;
	text-align: center;
	font-family: 'Roboto', 'sans-serif';
	line-height: 30px;
	padding-left: 10px;
}