Creating Your First Google Maps Mashup
Date: Dec 15, 2006
Article is provided courtesy of Que.
Google Maps is not only one of the best sites for maps and directions, it’s also the front end to an entire universe of custom maps—called mashups. That’s because you can mash together your own personal data with a Google map, and place the resulting mashup on your own website. In essence, you’re creating an overlay for your data, from the information in the Google Maps database, and that overlay is displayed on top of the appropriate Google map.
What kind of data can you map on a Google Maps mashup? You might want to create a map of your company’s headquarters, so that visitors can see where you are. Or you could get really fancy and map a collection of different locations on a single map—multiple retail stores, for example, or maybe properties for sale or rent in a given area.
Whatever you want to map, it’s relatively easy to do. All you need to know is the location’s latitude and longitude coordinates (which you can get from Google Maps itself), along with a basic knowledge of HTML and JavaScript. Then you use the Google Maps API to embed the custom maps you create into your own web pages.
In this article, I’ll show you how to create a basic single-location map mashup. But if you want to create more sophisticated mashups, you just add more sophisticated code. For example, the Google Maps API lets you add custom markers, info windows, and overlays to your maps. Each element is added via a distinct line of code, which then uses the Google Maps API to retrieve the appropriate map from Google.
And here’s the best thing: It doesn’t cost a dime to create your own personal Google Maps mashups. The use of the Google Maps API is totally free for non-commercial use.
Obtaining a License Key
To use the Google Maps API, you have to obtain a license key. This key can be used only on the web domain you specify—so if you plan on using a practice board or another website for development, you’ll want to get a key for that site in addition to your main site.
You obtain your Google Maps API key at http://www.google.com/apis/maps. This is also where you download the API’s documentation, access online help files, and link to the official Google Maps API Blog.
To obtain a license key, you’ll need to have a Google account, and then enter the domain of your website. Google will then email you the key, which you’ll include in all your Google Maps code.
Before You Map: Find Your Coordinates
To map any location in a Google Maps mashup, you need to know the coordinates of that location, in terms of latitude and longitude. Short of traveling to that location with a handheld GPS device, the easiest way to obtain latitude and longitude is to generate a map of that location on the Google site.
Once you have the map displayed, click the Link to This Page link, and then copy the coordinates from the resulting URL. Latitude and longitude are listed in the URL following the &ll parameter.
For example, here’s the URL that results if you map St. Catherine College in St. Paul, Minnesota:
If you ignore all the other gobbledygook and focus on the highlighted section of the URL after the &ll parameter, you see that the latitude and longitude coordinates for this location are 44.928835, -93.185177. Write down these coordinates; you’ll need them shortly.
Creating a Basic Single-Location Map
Our first Google Maps mashup will be a static map focused on a single location. To generate this map, you have to create three distinct blocks of JavaScript code. One block goes in the <HEAD> section of your document, the next augments the <BODY> tag, and the final block goes into the body of your document where you want the map to appear.
Let’s start with the opening code. Insert the following lines of code between the <HEAD> and </HEAD> lines of your document:
<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(LATITUDE, LONGITUDE), ZOOM);
}
}
//]]>
</script>
In this code, replace APIKEY with the license key Google supplied to you, and replace LATITUDE and LONGITUDE with the precise latitude and longitude coordinates of the location you want to map.
In addition, you want to replace ZOOM with a number from 0 to 17. The smaller the number, the wider the view; to zoom into street level, try a zoom of 13 or larger.
Next, you have to need to edit the <BODY> tag to include the following parameters:
<BODY onload="load()" onunload="GUnload()">
Finally, insert the following line of code into the body of your document, where you want the map to display:
<div id="map" style="width: 500px; height: 300px"></div>
You can play around with this last line of code a bit. For example, you can make the map larger or smaller by using different width and height parameters, or center the map on the page by surrounding it with <CENTER> and </CENTER> tags. It’s your choice in terms of formatting.
Adding a Marker to Your Map
What’s a map mashup without an icon to mark a specific location? Here’s a quick way to add a single marker to your map, pointing to the specified location. All you have to do is insert the following lines of code after the map.setCenter line in the <HEAD> of your document:
var point = new GLatLng(LATITUDE,LONGITUDE) map.addOverlay(new GMarker(point));
Replace LATITUDE and LONGITUDE with the precise latitude and longitude of the marker’s location, of course.
Adding an Info Window
Instead of a simple marker, you may instead want to display a balloon-like info window centered on the location you selected. This info window can display whatever text you specify.
To create an info window, enter the following lines of code directly after the map.setCenter line in the <HEAD> of your document:
map.openInfoWindow(map.getCenter(),
document.createTextNode("YOURTEXT"));
Naturally, you replace YOURTEXT with the text you want to appear in the info window.
Adding Map Controls
You may have noticed that the map you created is just a map—it doesn’t include any controls that let users zoom around or into or out of the default location. That’s fine if you want a static map (of your company’s headquarters, let’s say), but if you want to make the map interactive, you have to add the appropriate map controls. You do this by adding the following lines of code between the var map and map.setCenter lines in the <HEAD> of your document:
map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());
The resulting map now includes the expected right, left, up, down, and zoom in/zoom out controls—as well as the Map/Satellite/Hybrid display controls.
Adding Multiple Markers from Your Own Database
We’ll end this exercise with an adventure into more sophisticated Google Maps mashups—particularly, a mashup that maps multiple locations.
To plot multiple locations on a Google map, you have to create a database of those locations. Each location in the database has to be expressed as a latitude/longitude coordinate, of course; the database of coordinates can then be easily plotted as an overlay on the base Google map.
Let’s start with the database of locations. You need to create an XML file named data.xml. The contents of the file should be in the following format:
<markers> <marker lat="LATITUDE1" lng="LONGITUDE1" /> <marker lat="LATITUDE2" lng="LONGITUDE2" /> <marker lat="LATITUDE3" lng="LONGITUDE3" /> <marker lat="LATITUDE4" lng="LONGITUDE4" /> </markers>
Add as many <marker> lines as you like, each with its own coordinates.
You then call this file into your Google Maps code, using the GDownloadUrl command. You do this by adding the following lines of code after the map.setCenter line in the <HEAD> of your document:
GDownloadUrl("data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.addOverlay(new GMarker(point));
This adds a new overlay to your map, with each point from the data.xml file translated into its own marker on the map. Very cool!