V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2018 Application Form 2018 Colleges Entrance Exam 2018 Results 2018 Notification 2018 University Educational Jobs 2018 Government Jobs 2018

Search This Blog v24s guys

Follow by Email

03 April, 2013

Show Info Window in Google Map When Click on Marker in Asp.net Website

Introduction:

Here I will explain how to show info window when click on marker in Google maps api using JavaScript or show address in Google map with balloon type in asp.net website.

Description:

In previous article I explained clearly how to add Google map to website in asp.net, Add marker to Google map in asp.net website, Add multiple markers to Google map using JSON, Add custom marker to Google maps API and many articles relating to jQuery, JavaScript, asp.net. Now I will explain how to show info window when click on marker in Google maps api in asp.net website.

Before add marker to Google map in website 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="http://www.w3.org/1999/xhtml">
<head>
<title>show info window when click marker in google maps api in asp.net website</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6v5-2uaq_wusHDktM9ILcqIrlPtnZgEk&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(14.053147716796578, 80.2501953125),// This is used to center the map to show our markers
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
marker: true
};
var myLatlng = new google.maps.LatLng(13.053147716796578, 80.2501953125)
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title: "Chennai"
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({ content: "New Market Street,<br /> Choolaimedu High Road,<br /> Kodambakkam,<br /><b>Chennai</b>" });
infowindow.open(map, marker);
google.maps.event.addListener(marker, "click", function(e) {
infowindow.open(map, marker);
});
}
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
</form>
</body>
</html>
If you observe above code in header section I written code like

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=Your_API_Key&sensor=SET_TRUE_OR_FALSE">
Here you need to set key value as your api key and sensor parameter of the URL must be included, it indicates whether this application uses a sensor (such as a GPS locator) to determine the user's location for that reason you must set this value to either true or false explicitly.

To add info window when click on marker in Google maps api we need to write the code like as show below

var infowindow = new google.maps.InfoWindow({ content: "New Market Street,<br /> Choolaimedu High Road,<br /> Kodambakkam,<br /><b>Chennai</b>" });
infowindow.open(map, marker);
Demo

Post a Comment

Popular Posts

Recent Posts

Google Analytics