Skip to main content

A marker with an information window

         Following the sequence, I should be discussing a marker based example! Markers loading from an XML file. But, we will disrupt the sequence for the sole reason that I don't want to discuss comparatively tough examples as of now! So, we will jump on to a simple example to display an information window or the info window bubble as it is popularly known; along with a marker!

         Let's have a look at the following code. This is a simple code which will place a marker at "India" with an information window attached to it which appears only when the marker is clicked! The code goes as below:

<html>
<head>
<title>
Google Maps JavaScript API v3 Example: Simple  Infowindow
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
    var myLatlng = new google.maps.LatLng(22.7964,79.5410);

    var map = new google.maps.Map(document.getElementById("map"),
    {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP

    });

        var contentString = '<b>India</b><br>'+
            '<a href="https://sites.google.com/site/shreerangmohanpatwardhan/">Home</a>';
       
        var infowindow = new google.maps.InfoWindow(
    {
            content: contentString
        });

        var marker = new google.maps.Marker(
    {
            position: myLatlng,
            map: map,
            title: 'India'
    });

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

         Again, there is nothing very surprising out here. The contents of the information window could be anything from simple text, hyper-links to a complete form. Here, you can see that I have displayed a string and a hyper-link which points to my website. You can see the output in the following image.

         You can copy and paste this code and see the map in action! If you have any queries regarding the code, feel free to drop me a mail.



Labels:

Comments

Post a Comment

Please leave your comments here...

Recommended for You

Playing with the markers and info window bubbles...

    In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase!     So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life!     The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .
3 comments
Read more

Blue census, Water census...

          The Uttar Pradesh State Water and Sanitation Mission (SWSM) will soon be documenting the drinking water resources across six zones of the state. These zones are Allahabad, Ghaziabad, Gorakhpur, Lucknow, Varanasi and Moradabad. The documentation - to be done through Geographical Information System (GIS) and Global Positioning System (GPS) mapping - will take note of ponds (manmade and natural), wells and handpumps. This exercise which is a part of the National Rural Drinking Water Programme (NRDWP) will help the officials to create a proper database of these resources, which will be used for their management.          Through the mapping, all the details of all the resources will be compiled, complete with their longitude and latitude dimensions. The department plans to start off the exercise by April 1, 2011 and should end by March 31, 2012. The focus will initially be on villages where the ...
1 comment
Read more

Jugnu: India's first Nano Satellite

          IIT-Kanpur with its nano satellite 'Jugnu' has set new highs in the field of space research. A team of students, working under Dr NS Vyas (the visionary man behind the making of the nano-satellite) and other faculty members of the institute, have successfully made the country's first nano-satellite to be developed for the first time by any educational institute.           The development of the Jugnu started in the year 2008 with a team of 3 students. With time, the team has grown to the size of more than 50 students ranging from 1st year undergraduates to final year postgraduates and 14 professors from different disciplines to complete this challenging mission.            The satellite has been handed over to two ISRO scientists, DVA Raghav Murthy (Project Director, Small Satellite Projects) and Dr SK Shiv Kumar (Director, ISRO sat...
4 comments
Read more

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 ev...
5 comments
Read more

jQuery Mobile's Next Big Step

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 😍 😍
Post a Comment
Read more