Integrating Google Maps API into your Website
Have you come across some site that has a small box that shows maps just like those shown on Google Maps web page? Well, it’s simple to get one of those Google Maps to be integrated on your website as well. Google code gives away its Google Maps Application Programming Interface (API) for free. Provided you abide by the Google Terms and Conditions, you are free to embed the Google Maps API on your web application with JavaScript. The API provides a number of utilities for manipulating maps like those on the original Google Maps does.
There is no rocket science involved in embedding the Google Maps API into your webpage. All you need to know is exactly where you need to put the map for the public display and use. Other things are managed by Google for you. Just follow the following steps and you will have a seamless integration of the Google Maps API on your page in no time.
1. Sign up for a Google API key.
You are required to accept the Google terms and conditions, provide the URL of the website that you are going to embed the Google Maps API in, and confirm the registration to get the API key. You can apply for the key at
http://www.google.com/apis/maps/signup.html.
By checking the agreement box, entering the URL, and pressing the “Generate API key” button, you will get an API key that looks like this:
Save this key in some text file as you will need this key to integrate it in the scripts to generate the maps.
2. Incorporating the Google Map.
Incorporating the Google Map is really simple now that you have your API key. Copy the following code and paste it into your HTML file where you want your Google Maps API to perform.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://maps.google.com/maps?file=api&v=1
&key=<YOUR_API_KEY_HERE>">
</script>
</head>
<body>
<div style="width: 400px; height: 300px"></div>
<script>
//<![CDATA[
var map = new GMap(document.getElementById("map"));
map.centerAndZoom(new GPoint((37.38216158779348, -122.08145141601562)3);
//]]>
</script>
</body>
</html>
The <YOUR_API_KEY_HERE> is to be replaced by you API key provided by Google on confirmation as mentioned above. Executing this script will show Google Headquarters at Mountain View, CA as the center of the map. You can change the default center of the map by replacing the geographical coordinates in the
map.centerAndZoom(new GPoint((37.38216158779348, -122.08145141601562)3);
line. (37.38216158779348, -122.08145141601562) are the coordinates of Google Headquarters.
View Larger Map
Save and upload the file on a web server and then you are ready to roll.
