Using Google Maps to show locations : Tutorial


26 Oct  

Let’s add few more lines of code to our old code.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Trial 2 - Google Map </title>
<script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA2jxKTWtTb3k1GWIa3mujjhQl_lmNMpOxuWfURPaKz0unkHV6ixSeTRtOIMen8GTW05sHGBBMYhQbXw" type="text/javascript"> </script>

<script type="text/javascript">

var icon = new GIcon();
icon.image = "http://www.google.com/mapfiles/marker.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 30);
icon.shadowSize = new GSize(35, 30);
icon.iconAnchor = new GPoint(10, 30);

function my_map()
{
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("gmap"));
        map.setMapType(G_HYBRID_MAP);
        map.setCenter(new GLatLng(51.4419, -0.1419), 8);
        map.addControl(new GSmallMapControl());
        var marker = new GMarker(new GLatLng(51.4419, -0.1419));
        GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml("This is the capital of UK");
      });

        map.addOverlay(marker);
      }
    }

</script>

</head>

<body onLoad="my_map();">

<div id="gmap" style="width: 1000px; height: 400px">

</div>

</body>

 

Here you can see that we have used a GMarker to locate the centre of our map. Then, I added a description to that bubble. For doing this first I asked the script to listen to the activity ‘click’ using addListener and then popup a message using openInfoWindowHtml.

 

The output of the above script is shown below:

 

image

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay

Tags:


TechBlog on Facebook

Leave a Reply