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
No comments:
Post a Comment