Google Maps & Javascript : An Intro


25 Oct  

Today, I am staring a new section – ‘Google Maps & Javascript’. It seems there is a lot of interest in Google maps and using them in user applications. In this segment I will be discussing about the ways to accomplish this. martini

The first thing that you need to note is that Google has done  tremendous amount of work in building and improvising the map functionalities. Since Google map supports API we can use these functionalities in our site every easily (If you want to know how to get a Google map API – just go to Google and type “ Google map API “ and hit the search button. This will show you the Google map page for doing this. It is almost a ‘one  click’ task).

In this edition of techblog, I am gonna show some basic things that you can do with Google maps.

 

Just do a simple coding:

 

<!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">

function my_map()
{
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("gmap"));
        map.setCenter(new GLatLng(51.4419, -0.1419), 8);
        map.addControl(new GSmallMapControl());
      }
    }

</script>

</head>

<body onLoad="my_map();">

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

</div>

</body>

I’m gonna skip few basic html stuff and focus on the javascript portion.

You can see that we are actually calling the Google Map API in the header section. Then we creating a function my_map() to create a custom Google map.

 

Function

 

In the first place ,the function checks whether the browser supports the displaying of Google maps or not. If you wish you can add an ‘alert’ to inform the user, in case if the browser is not supported.

Now we are using setCenter method to set the location of the centre of our map. You can see that I am giving the latitude and longitude values near to London to have a map centred around London. The last number (8) actually indicates the ‘level of zooming’.

Finally I use map.addControl to add the zoom in and zoom out features to the map.

By invoking GMap2(document.getElementById("gmap"), I am asking the script to go to div with id ‘gmap’ and display the GMap2 (Google map from API) there. 

 

If you run this code, you will see this result:

 

google map

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

Tags:


TechBlog on Facebook

Leave a Reply