After displaying markers and markers with info windows, we will now display only info windows on the map. So our aim becomes, placing an info window on a google map when a user clicks on the map.
Now, the first question that will pop up in your mind is why do we need such a thing? To answer this question let us consider a simple example. Consider that, when an user clicks on a map, a marker appears with an info window and you want the user to enter some data in a form in the info window and save that data. Now, if the user enters inconsistent data, there would be marker on the map, having no valid information! The marker would then be rendered useless, with no information! Something like a dangling pointer!
Now, if you haven't understood a word of this; don't worry. You will soon understand the importance of this example! So, without any further discussions, let's have a look at the code!
Here goes the code...
<html>
<head>
<title>
Google Maps API v3 - Simple Info window example
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function click_window()
{
map = new google.maps.Map(document.getElementById("map"),
{
zoom: 5,
center: new google.maps.LatLng(22.7964,79.5410),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var html = "This is an Info window without a marker.";
var infowindow = new google.maps.InfoWindow(
{
content: html
});
google.maps.event.addListener(map, 'click', function(event)
{
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
}
</script>
</head>
<body onload="click_window()" onunload="GUnload()">
<div id="map" style="width: 100%; height: 100%">
</div>
</body>
</html>
Copy and paste the above code in an html file and see the map in action! The output will look as seen in the picture below.
Now, the first question that will pop up in your mind is why do we need such a thing? To answer this question let us consider a simple example. Consider that, when an user clicks on a map, a marker appears with an info window and you want the user to enter some data in a form in the info window and save that data. Now, if the user enters inconsistent data, there would be marker on the map, having no valid information! The marker would then be rendered useless, with no information! Something like a dangling pointer!
Now, if you haven't understood a word of this; don't worry. You will soon understand the importance of this example! So, without any further discussions, let's have a look at the code!
Here goes the code...
<html>
<head>
<title>
Google Maps API v3 - Simple Info window example
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
function click_window()
{
map = new google.maps.Map(document.getElementById("map"),
{
zoom: 5,
center: new google.maps.LatLng(22.7964,79.5410),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var html = "This is an Info window without a marker.";
var infowindow = new google.maps.InfoWindow(
{
content: html
});
google.maps.event.addListener(map, 'click', function(event)
{
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
}
</script>
</head>
<body onload="click_window()" onunload="GUnload()">
<div id="map" style="width: 100%; height: 100%">
</div>
</body>
</html>
Copy and paste the above code in an html file and see the map in action! The output will look as seen in the picture below.
Comments
Post a Comment
Please leave your comments here...