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

Your first approach was almost ok, the problem was that at the point when click listener was called, all markers were already in markersArray so markersArray.length - 1 always pointed to the last marker. Just create a variable which value holds the id of the marker inside the scope of the addMarker function. Here is the working code (notice the use of var index = markersArray.length;):

'use strict'


var infowindow;
var contentString;

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 index = markersArray.length;
	var marker = new google.maps.Marker({
		position: location,
		map: map,
		draggable: true,
		animation: google.maps.Animation.DROP,
		label: index + "",
		title: index + ""
	});
	markersArray.push(marker);
	marker.addListener('click', function() {
		clickMarkerEvent(index);
	});
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
	for (var i = 0; i < markersArray.length; i++) {
		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);
}

function setMapOnMarker(markerIndex, map) {
	markersArray[markerIndex].setMap(map);
}

function hideMarker(markerIndex) {
	setMapOnMarker(markerIndex, null);
}

function deleteMarker(markerIndex) {
	hideMarker(markerIndex);
	markersArray[markerIndex] = null;
}


function deleteMarkers() {
	clearMarkers();

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

	markersArray = [];
}

//listeners
function clickMarkerEvent(index) {

	if (markersArray[index].getAnimation() !== null) {
		markersArray[index].setAnimation(null);
	}
	else {
		markersArray[index].setAnimation(google.maps.Animation.BOUNCE);
	}
	
	contentString = '
' +
	'
' +
	'
' +
	'
Marker Info
' +
	'
' +
	'Locatoin: 
' + markersArray[index].getPosition() + '
' + 
	'Title:  
' + markersArray[index].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, markersArray[index]);
}

function deleteMarkerClickEvent(index) {
	deleteMarker(index);
}

function hideMarkerClickEvent(index) {
	hideMarker(index);
}

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

#map {
	height: 100%;
}