Only information bubbles...

         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.

Comments

Recommended for You

My first blog!

" W hy is it that there are no Goolge Maps API examples which show India specific data?"...This question kept bothering me all through my learning phase. I always thought why aren't there any examples that use a map which shows Indian locations. Anybody who is new to Google Maps API application development would love to see a location that he knows of on the map! This is what I longed for all the way through and now have decided to put up simple examples and other supporting data for building customised simple Google Maps and all will show locations in India! When starting something new, if one finds something familiar out there, then it gives a feeling of comfort! And this is what I will try to provide to all those out there who are facing a similar problem that I faced! I am not an expert at Google Maps API, I am learning too...But, I will like to help out people along the way! So, all comments from the novice to the profession...

What is GIS?

Once I started writing this blog, I received a number of feedbacks from readers asking me to write something about what exactly GIS is. So here is some information, that will give you an idea about " What is GIS? " A geographic information system (GIS) integrates hardware, software, and data for capturing, managing, analyzing, and displaying all forms of geographically referenced information. GIS allows us to view, understand, question, interpret, and visualize data in many ways that reveal relationships, patterns, and trends in the form of maps, globes, reports, and charts. A GIS helps you answer questions and solve problems by looking at your data in a way that is quickly understood and easily shared. GIS technology can be integrated into any enterprise information system framework. ...

Ground Truth - How Google Builds Maps

Todays's article is cross posted from The Atlantic 's Tech section. The article was posted by Alexis Madrigal who is a senior editor at The Atlantic , where he oversees the Technology channel. So, thanks to The Atlantic and Alexis Madrigal, we will have an exclusive look inside Ground Truth , the secretive program to build the world's best accurate maps. Behind every Google Map, there is a much more complex map that's the key to your queries but hidden from your view. The deep map contains the logic of places: their no-left-turns and freeway on-ramps, speed limits and traffic conditions. This is the data that you're drawing from when you ask Google to navigate you from point A to point B -- and last week, Google showed me the internal map and demonstrated how it was built. It's the first time the company has let anyone watch how the project it calls GT, or "Ground Truth," actually works. Google opened up at a key moment in its evo...

ES6 101 - For..of

Spatial Unlimited changes to The UI Dev After being hosted on blogger 😣 for the last 6 years 📆, this page has finally been moved to Github.io This means a few things for you, dear reader! You will be redirected to the new page shortly! ⏩ ⏩ ⏩ Once crapy HTML is now better looking Markdown ! 😍 😍 The entire blog is a Github repo ! 😍 😍 Spatial Unlimited is now The UI Dev 😍 😍

The UI Dev

Search This Blog