Google Maps
Adding an Unobtrusive Map
The code that Google provides to add a map into your web page has incorporated some of what is needed in order to separate it from the HTML but there are several things that can be changed in order to completely separate it out from the HTML so as to have no JavaScript code at all in your web page. We will look at how to add the code to our page properly before we start to look at what the code actually does and how to modify it to display the map that you want it to display. The code that you have in your web page will then need to change very little from one page to another in order to display several different maps on different pages of your site.
Let's start by looking at the HTML needed to add Google maps to a web page. There are two pieces. The first consists of two script tags that need to be placed in the head of your page. Note the minor modification to the src attribute so that it is valid HTML.
v=2&key=ABQIAAAA496CbrflCxvduLD30wNsqhQq3tWW1UGy0rG7B4F3xzgSR63hWxSoz3WEdQlXbSF2-qEhMm4zqDCfRg" type="text/javascript"></script><script src="mymap.js" type="text/javascript"></script>
You will of course need to change the API key referenced by your pages to use the one that you signed up to use for your site. The mymap.js reference will also need to be different for each page in order for you to be able to display different maps. We'll look at the code that we need to place in that file in just a moment and the rest of the tutorial series will deal with how to modify the content of that file to display different maps.
The second piece of HTML that we need goes in the body of the page where we want the map to appear on this page.
You may want to move the style commands out of that HTML into a separate stylesheet in order to further separate the different component parts of your page. You may also need to change the width and height specified if you want to display a smaller or larger map.
The mymap.js file will contain the JavaScript that defines the specific map that we want to display on a particular web page. Most of the code that we want in the file can be directly copied from the code supplied by Google.
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}
To make this operate unobtrusively without needing to add JavaScript into our HTML the way that Google has we just need to add the following two lines to the bottom of that file to call the load and unload functions from within the JavaScript rather than adding it into the HTML.
window.onunload=GUnload;
None of the rest of the code supplied by Google is actually needed and by coding our map this way instead of using all the code that Google supplied we can easily add a map into any web page.
Next we will look at Zooming In and Out.
