aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Google Maps API V3 - Add Click Event Listener to Marker in Google Maps Example

Apr 19, 2015

Here I will explain how to add click event listener to marker in Google maps using Google maps API V3 with example in website or use Google maps API V3 to add client event listener to marker in Google maps using jQuery JSON in website.


In previous article I explained clearly how to add Google map to website in, Add marker to Google map in website, jQuery image slideshow in, Sitemap navigation control example in and many articles relating to jQuery, JavaScript, Now I will explain how to add click event listener to marker in Google maps using  Google maps api v3 in website using jQuery JSON data in website.

Before add click event to marker in Google maps first we need to get Google API key for that please check below url

Once you got the key write the following code in your aspx or html page like as shown below 

<html xmlns="">
<title>Show/Add multiple markers to Google Maps in website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
<script type="text/javascript" src = "">
<script type="text/javascript">
function initialize() {
var markers = [
"title": "Chennai",
"lat": 12.897489183755905,
"lng": 80.2880859375,
"description": "Chennai"
"title": "Hyderabad",
"lat": 17.26672782352052,
"lng": 78.5302734375,
"description": "Hyderabad"
"title": "Bangalore",
"lat": 12.897489183755905,
"lng": 77.51953125,
"description": "Bangalore"
"title": "visakhapatnam",
"lat": 17.518344187852207,
"lng": 83.3203125,
"description": "visakhapatnam"
var mapOptions = {
center: new google.maps.LatLng(11.44, 78.79),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
//  marker:true
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
(function(marker, data) {

// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);, marker);
})(marker, data);
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
If you observe above code in header section I mentioned multiple latitude and longitudes of different cities and by default I mentioned one city latitude and longitude by using that default details we can center the map to near place of other cities based on that other cities whatever we are going to mark are visible.

In remaining we are adding click event to marker in Google maps and adding marking in google map and infowindow is used to show info of all the cities based on the description whatever we mentioned in json string.


Google Maps API V3 - Add Click Event Listener to Marker in Google Maps Example

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.