Tuesday, November 16, 2010

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.