Introducing the Google Maps API - Using the Google Maps API, Step By Step
(Page 3 of 4 )
Now that the services provided by the Google Maps API have been discussed, let's see what steps we need to take to use the API. To use the Google Maps API, two main steps have to be followed: acquiring the registration key and setting up the map. The second step consists of sub-steps that actually deal with the setting up of HTML and the Google Maps API library.
Acquiring the Registration Key
It is through the registration key that one can access the API. A key can be used within a web directory i.e. the files within that directory and its subdirectories can make use of the key. To get the key, go to the site and provide the URL of the site for which the key has to be generated. The key along with an example will be provided which can be used as a base for further developments.
Setting up the map
The Google Maps API library is a JavaScript library. So its focus includes HTML and JavaScript based applications. In other words, the Google Maps API targets the UI for the web applications. To set up the page to display the map the required steps include setting up the HTML page and importing/including the Google Maps API.
Setting up the HTML page
The first step in displaying the map is to provide the required placeholder within the page where the map has to be shown. To do this the <div> tag must be used. It creates a logical block for the display of the map. For example the following statement creates a placeholder named 'map':
<div id="map" style="width: 500px; height: 500px"></div>
Importing/Including the Google Maps API
To use the API, its library has to be referenced. In the case of JavaScript, importing or including the library (which are just other terms for referencing a library) is done using the src attribute of <script> tag. So to include the Google Maps API library, the src of the <script> tag would be as follows:
<script src="http://maps.google.com/maps?
file=api&v=2&key=[yourkey]" type="text/javascript"> </script>
The value of the src attribute tells us two important points about the Google Maps API. The first is the location of the API which is Google's site itself. So even for testing purposes, availability of the Internet is required. The second is the usage of the key provided after registration. The key is passed along with the URL in the src to tell Google that the site trying to access the API library is an authorized site.
The next step is to implement a function that will be called when the document is loaded. That is done by calling a function in the <body> tag's onload handler. The statements would be :
<script type="text/javascript">
//<![CDATA[
function load() {
}
//]]>
</script>
for defining the function. It would be called from the body thus:
<body onload="load()" >
:
:
</body>
The first step in the implementation of the logic within the function is to check whether or not the client browser is capable of displaying the map. That can be done using GBrowserIsCompatible(). It returns a Boolean value specifying whether or not the browser is capable of displaying the map. The code block using it would be thus:
if (GBrowserIsCompatible()) {
//...
}
To display the map what we need is an object of the GMap2 class. To get it, we're required to use the GMap2 constructor with the id of the <div> serving as a placeholder. For example the following code creates an instance of the GMap2 class and assigns it to the variable named map:
var map = new GMap2(document.getElementById("map"));
The last step in displaying the map is to set its focus on a particular point. That can be accomplished by calling the setCenter() method on the map variable. The argument passed is of the GLatLng type which in turn accepts latitude and longitude as its parameter. The following sets the focus on the point defined by latitude 31.122027 and longitude 77.111664:
map.setCenter(new GLatLng(31.122027, 77.111664), 13);
The map object can be used to manipulate the map by using the methods enumerated in the first section. The last but not least point is to call GUnload() through the onunload handler of the body tag to prevent memory leak:
<body onload="load()" onunload="GUnload()">
:
</body>
That brings us to the end of the third section. In the next section I will develop a small application that will show the different functions discussed in the first two sections and use the steps detailed in this section.
Next: The Google Maps API in the Real World >>
More Web Authoring Articles
More By A.P.Rajshekhar
