Skip to main content

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.

Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Two maps on the same page - Side-by-side

    How good I am feeling to post a code example after such a long time! It's been all "news" over the past so many posts! Well now that I am finally doing a code example, I am posting a very highly requested code sample. Placing two Google Maps on the same page (Now that's simple you would say!), but side by side. Now this is the thing that most people struggle with. Well, implementing the second part is also very simple, as you will see in today's code.     Let's see the code. Here it is!     The output of the above code will be as seen in the result section above.     As most of you will realize, there are two maps, one centered at "Pune" and other at "Noida". Why I chose these two locations? Well, just like that!...The main issue of concern is how the maps appeared side-by-side and not one below the other as would be normal behavior of two "div" elements used in the same page. Now here is the trick! Check out the...
10 comments
Read more

Retriving co-ordinates...

         We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window.         Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map;    //When using event as a parameter to a function declare map, strictly as a global variable fun...
5 comments
Read more

Jquery Mobile Listview enhancements and customization

    In this post today, we will take a look at the various enhancements and customization that we can do to the standard listviews. All these enhancements or customization are questions asked by various people on the Jquery Mobile forum. I have tried to put together a solution to some of them.     Let's take a look at a few of them. Some questions are really amazing like " W hen i have 3 nested listview structure and moved to 3rd nested, how to move back to second nested listview? " Now this is a really good question and a nice valid requirement too. When we had see an example on nested listviews  you must have wondered how we would navigate to the previous levels from the current level. Well here is a solution that I had put together.     Another really nice question was " Listview with collapsable listview inside ". This is really a good example to try out. Take a look at the solution that was proposed and also taken from other jsfid...
Post a Comment
Read more

Jquery Mobile Form - Slider control

    Input field of type range is newly introduced in HTML5 and is very well styled. The style is further enhanced when using the Jquery Mobile framework and we will see how this can be done in today's post. Jquery Mobile styles the range input type with capsule-corners and adds a circular handle to the slider.   The input's value is used to configure the starting position of the handle and the value is populated in the text input. Specify the min and max attribute values to set the slider's range. If you want to constrain input to specific increments, add the step attribute.   As you drag the slider's handle, the framework will update the native input's value (and vice-versa) so they are always in sync; this ensures that the value is submitted with the form.     The range input elements are available in 2 flavors/sizes - regular and mini. Adding a data attribute data-mini="true" to the input tag renders a smaller sized input el...
Post a Comment
Read more

SASS: Syntactically Awesome Stylesheets - An Introduction

    I had some free time today, and decided to explore into SASS, which I had planned on doing for a long time. SASS is really cool and it really is simple styling with a lot of attitude. SASS really makes CSS so much fun. I loved it and am putting up a few posts to talk about the various features of SASS.     SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance and much more. The SASS CSS is required to be compiled before it is transformed into standard CSS using a command line tool or a web-framework plugin. Let's not worry about this for now.     SASS CSS can be written using 2 types of syntaxes. The most popularly used syntax is known as "SCSS", rightly named " Sassy CSS" and is a superset of CSS3's syntax. This means that every CSS3 stylesheet is valid SCSS as well. The second syntax is an older one known as the "indented syntax" or just SASS. This syntax is for people who do not love brackets and...
Post a Comment
Read more