Skip to main content

Form info window

         Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!

         In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below!

<html>
<head>
<title>
Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it.
</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
function initialize()
{
    var myLatlng = new google.maps.LatLng(28.635157,77.22496);
      map = new google.maps.Map(document.getElementById("map_canvas"),
    {
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    google.maps.event.addListener(map, 'click', function(event)
    {
        placeMarker(event.latLng);
    });
}
 
function placeMarker(location)
{
    var marker = new google.maps.Marker(
    {
        position: location,
        map: map
    });

    var coords= location.lat().toFixed(6) + ',' + location.lng().toFixed(6);

    var html = "<table>" +
                 "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
        "<tr><td>Location:</td> <td><input type='text' value = " + coords +" id='loc'></td> </tr>" +
                 "<tr><td>Cache Object Taken:</td> <td><input type='text' id='ctake'/></td> </tr>" +
                 "<tr><td>Cache Object Placed:</td> <td><input type='text' id='cput'/></td> </tr>" +
                 "<tr><td></td><td><input type='button' value='Save' onclick='saveData()'/></td></tr>";

    var infowindow = new google.maps.InfoWindow(
    {
        content: html
    });

    google.maps.event.addListener(marker, 'click', function()
    {
        infowindow.open(map,marker);
    });
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</body>
</html>

         The output of the above code will look as seen below!


 

           If you have any queries regarding the above code feel free to comment here or drop me a mail. If there are any recommendations regarding content of posts, then please mail me your wish list!
Labels:

Comments

  1. Sid MendirattaNovember 23, 2010 at 7:54 AM

    This comment has been removed by the author.

    ReplyDelete
  2. Sid MendirattaNovember 23, 2010 at 7:55 AM

    Nice Information, I like the simplicity of your blog Shreerang. It gives out information with code. I am interested to know what other applications you have worked on?

    Would you mind mentioning them on the blog?

    ReplyDelete
  3. Shreerang PatwardhanNovember 23, 2010 at 8:45 AM

    Thanx for your appreciation Sid! I will definitely, gradually put in some of the applications that I have developed on the blog!

    ReplyDelete
  4. Sid MendirattaNovember 24, 2010 at 6:15 AM

    Thank you, I appreciate it.

    ReplyDelete
  5. AnonymousApril 15, 2011 at 4:06 AM

    Hello,

    Thanks for the information. The above information are very simple and useful.
    could you please have a post on the below.?
    This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary!

    Thanks in advance for your posting

    Regards
    SONA

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

Where does Google get it's live traffic data from?

Referring to a post that I wrote earlier, Google’s - Live traffic Layer , ever wondered how Google collected this data? I was wondering the other day, how Google received live data to display it on their maps as a layer! I looked up the web and found something very interesting and am sharing the same with you all. As we all know, the traffic layer is available most accurately in several states in USA. Most major metro areas in the US have sensors embedded in their highways. These sensors track real time traffic data. Easy to miss at high speeds (hopefully anyway, traffic permitting), more commonly noticed may be the similar sensors that often exist at many busy intersections that help the traffic lights most efficiently let the most amount of people through. The information from these tracking sensors is reported back to the Department of Transportation (DOT). The DOT uses this data to update some of the digital signs that report traffic conditions in many metro areas. They als
17 comments
Read more

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 th
9 comments
Read more

The bitter divorce of PSD and HTML

    Today's article is an interesting post that I read. The original post in Portuguese and authored by Fabricio Teixeira  can be found at arquiteturadeinformacao  (Now don't ask me pronounce this =)).     Some are calling it the death of PSD  but I prefer calling it a "divorce". PSD and HTML are both healthy and living strong, just that they do not live together anymore. "PSD to HTML", which for years was the most accurate and sometimes the only right path to web design process, seems like has its days counted.     Firstly you draw a page in Photoshop; impeccable layout, representing exactly how the web pages would appear when opened in a browser. After a sign-off on this picture (PSD) from the client the front end developer transforms these pictures into HTML, CSS and Javascript. The assets are cut, one by one, exported from the PSD and integrated into the HTML. Plugins and new tools are created in the process and some companies even charge upto $1
5 comments
Read more

Geodashing...

            Geodashing!?!? Sounds something similar to Geocaching right? Well, it is! Geodashing is very similar to Geocaching in the sense that people are searching for a particular spot with only a set of coordinates as their clue.             Here's how it works. In each game, a large set of waypoints, called dashpoints, from all over the world is posted on the Web. Dashpoint locations are chosen at random by computer, with all the unpredictability that presents. Dashpoints might be in suburban neighborhoods or in the middle of wilderness areas. Then, the race is on to see who can reach the most dashpoints before the deadline.             Geodashing players can participate as individuals or as teams of up to five players to increase the number of dashpoints reached. The competition is friendly and teamwork helps to get high scores, so put your online acquaintances to good use.             Because the dashpoints are spread all over the world, it doesn't matter w
Post a Comment
Read more

Delhi Metro's Airport Express Corridor mapped on GIS...

         The Delhi Metro's showcase Airport Express Corridor, connecting the Indira Gandhi International Airport to the heart of the Delhi, was rolled out for the public on the 23rd of February, 2011.          This is the first line in India to be mapped on GIS to enhance safety, maintenance and traffic regulation. Mapping the corridor on GIS will help in mobilising emergency services in case of a blast or fire on the train. Delhi Airport Metro Express Private Limited, the company operating the line, has mapped all the emergency services, including fire stations, police stations, hospitals, etc. along the alignment.
Post a Comment
Read more