Google Maps
Get an API
The Google Maps service allows you to add maps provided by Google into your web page. With these maps your visitors can zoom in and out and move the map around which will assist them in working out just exactly where the spot(s) you have marked on the map are relative to what they are already familiar with. The Google maps are so flexible because they use JavaScript to allow your visitors to interact with the map.
The first thing that you need to do in order to be able to use Google Maps on your web pages is to sign up for an API key that will allow the maps to be used on your site. This allows Google to track how many times their maps are displayed on which site which is the only charge that they make for using this service (provided that you display the maps on web pages that anyone can access at no charge). So let's start by getting an API.
You will need to agree to their terms of service and enter the domain name you want to put the maps on in order to request an API key. You will also need an account with Google (if you don't already have one then you can create one after requesting an API.
Once you have signed up Google will provide the API key, remind you of the domain you can use it on, and also provide the code for a sample web page you can add to your site which will display a Google map. In order to allow you to use the maps on as much of your site as possible you should specify the domain without any sub-domain qualifiers on the front (and without the www). If you do specify a specific sub-domain then you will only be able to use the maps on that sub-domain.
So as to make these tutorials as accurate as possible I have signed up for an API key for http://javascript.about.com to use with these tutorials. The code for the sample page that Google has provided me with for this API key is:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&
v=2&key=ABQIAAAA496CbrflCxvduLD30wNsqhQq3tWW1UGy0rG7B4F3xzgSR63hWxSoz3WEdQlXbSF2-qEhMm4zqDCfRg" type="text/javascript"></script><script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
Taking the code out of that which displays the actual map and adding it into this page gives us a map that looks like this:
Note that the code supplied by Google is somewhat messy since it jumbles the JavaScript in with the HTML. We'll look at how we can clean this up to separate the code for the map into completely separate files in the next tutorial before we move on to look at how we can change the map to display whatever location in the world that we want.
Also note that you can't use my API code from the script shown above as that one only works on javascript.about.com.
The next step is Adding a Map.
