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.
Demo for getting Google Map Marker ID
Hi! Would you mind if I share your blog with my twitter group? There’s a lot of people that I think would really appreciate your content. Please let me know. Cheers
Thanks for contacting. Happy, if u share!
It is really a nice and helpful piece of information. I am glad that you shared this helpful information with us. Please keep us up to date like this. Thank you for sharing.
This really answered my drawback, thank you!
I enjoy what you guys are up too. This sort of clever work and reporting! Keep up the superb works guys I’ve you guys to my blogroll.
Hello there! Do you use Twitter? I’d like to follow you if that would be okay. I’m definitely enjoying your blog and look forward to new posts.
I think this is one of the most important information for me. And i’m glad reading your article. But wanna remark on some general things, The web site style is ideal, the articles is really nice : D. Good job, cheers
very good put up, i definitely adore this web internet site, maintain on it