3/05/2007

Google Maps @ Work..!

In the first part of this article, we will discuss how to integrate a feature-rich map into your application in record time, by using the Google Maps API. The Google Maps API is an easy-to-use JavaScript API that enables you to embed interactive maps directly in your application's web pages. And as we will see, it is easy to extend it to integrate real-time server requests using Ajax.

Getting started with the Google Maps API is easy. There is nothing to download; you just need to sign up to obtain a key to use the API. There is no charge for publicly accessible sites (for more details, see the Sign up for the Google Maps API page). You need to provide the URL of your website, and, when your application is deployed on a website, your key will only work from this URL. One annoying thing about this constraint is that you need to set up a special key to use for your development or test machines: for the sample code, I had to create a special key for http://localhost:8080/maps, for example.

Once you have a valid key, you can see the Google Maps API in action. Let's start off with something simple: displaying a map on our web page.

Although the API is not particularly complicated, working with Google Maps requires a minimal knowledge of JavaScript. You also need to know the latitude and longitude of the area you want to display. If you're not sure, you can find this sort of information on the internet, or even by looking in an atlas!

The full code listing of our first Google Map is shown here:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Our first Google Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MYKEY"
type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

  function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(-41.5, -185), 5);
   }
  }
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 420px; height: 420px"></div>
</body>
</html>

The first thing to notice here is the code that fetches the actual JavaScript code from the Google Maps server. You need to supply your key here for the code the work.


<script src="http://maps.google.com/maps?file=api&v=2&key=MYKEY"
type="text/javascript">
</script>


Next comes the code that actually downloads the map from the server.


<script type="text/javascript">
//<![CDATA[
  function load() {
  if (GBrowserIsCompatible()) {
   var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(-41.5, -187.5), 5);
   }
  }
//]]>
</script>


Finally, in the body, we display the map. The size and shape of the map are taken from the corresponding HTML element. The map is initialized when the page is loaded (via the onload event). In addition, when the user leaves the page, the GUnload() method is called (via the onunload event). This cleans up the map data structure in order to avoid memory leak problems that occur in Internet Explorer.


<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 420px; height: 420px"></div>
</body>


Panning and Zooming
Now that we can successfully display a map, let's try to add some zoom functionality. The Google Maps API lets you add a number of different controls to your map, including panning and zooming tools, a map scale, and a set of buttons letting you change between Map and Satellite views. In our example, we'll add a small pan/zoom control and an "Overview map" control, which places a small, collapsible overview map. You add controls using the addControl() method, as shown here:


function load() {
  if (GBrowserIsCompatible()) {
   var map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(-41.5, -187.5), 5);
    map.addControl(new GSmallMapControl());
    map.addControl(new GOverviewMapControl());
  }
}

1 comment:

Varun S said...

Very nice one Dinesh... Please do continue to provide more info in your blogs.. this is the first time i saw your blog site after i got in touch with you again a couple of days back... All your blogs are really interesting.

Tired of seeing that 500 Bad gateway error while deploying a Springboot application in AWS...?

By default, Spring Boot applications will listen on port 8080. Elastic Beanstalk assumes that the application will listen on port 5000. Th...