Get Google Map Marker ID when we click on it
When we use Google Map in our web pages, we will have to think about getting the Google map marker ID, when it is clicked. Google Map marker ID is required for displaying some data which is associated with the Pin or marker on google map. Or we use the google map marker ID for storing the latitude and and longitude with the marker ID. On google map, each pin has got a unique id. So if you click on different markers, you will be getting different IDs. Here I am going to show an example for adding IDs to the markers on the Google Map and getting/alerting the ID of the clicked marker.
HTML For showing Google Map Markers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Map</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<style type="text/css">
.google-map {
width: 60%;
height: 500px;
margin: 0 auto;
border: 1px solid #c5c5c5;
}
</style>
</head>
<body>
<div class="google-map" id="map-canvas"></div>
</body>
</html>
Here, we are loading the map inside id=”map-canvas” div. In order to load Google map, we have to add Google map API url in the head tag of the HTML page.
Javascript For Google Map
<!--Script for google map-->
<script type="text/javascript">
function initialize_list() {
var latlng = new google.maps.LatLng(33.22949814144931,-99.82177934375);
var myOptions = {
zoom: 5,
center: latlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
var hotels = [
['Hotel 1, Place Name1, City1, State1', 33.22949814144931,-99.82177934375, 4, 1],
['Hotel 2, Place Name2, City2, State2', 33.376412351246586,-96.78955278125, 3, 2],
['Hotel 3, Place Name3, City3, State3', 35.08395557927625,-93.84521684375, 2, 3],
['Hotel 4, Place Name4, City4, State4', 37.631634755806274,-105.31494340625, 1, 4]
];
for (var i = 0; i < hotels.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
map: map,
id: hotels[i][4], //we are adding IDs to the marker here
title: hotels[i][0]
});
google.maps.event.addListener(marker, "click", function() {
var marker = this;
alert('ID is :'+ this.id);
});
}
}
window.onload = initialize_list;
</script>
We are storing the details of the hotel, including the latitude and longitude values of the place in the ‘hotels’ array. And we set the latitude and longitude for the initial display of the map.
Here using ‘id’ we are assigning ID value to the marked. And on the click event or when we click on the marker, we will alert the clicked markers ID.
