1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
Google Maps is perhaps the biggest and most useful of all the common web APIs, but it's also one of the more complex and can be intimidating for newcomers. It's also somewhat difficult to immediately recognize all the possibilities of the Google Maps API since there are literally hundreds of ways to use it.
To keep things simple we'll start with a vary common use: Adding a map to your site and displaying some markers.
== Getting Started ==
The first thing you need to do is apply for a Google Maps key. Just head over to the [http://code.google.com/apis/maps/signup.html API key signup page] and login to your Google account. Once you have the key, create an html file with this basic code:
<!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" xml:lang="en" lang="en">
<head>
<title>My Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=yourkeyhere" type="text/javascript"></script>
</head>
<body>
<h1>My Map</h1>
<div id="map-canvas"></div>
</body>
</html>
Remember to paste your map key into the JavaScript tag and you're all set. Well, almost. WE need to add one more little thing so that Google will go ahead and initialize the map. Change the body tag to include the following handlers:
<body onload="initialize()" onunload="GUnload()">
== Adding in the Map ==
We've got our script set up and it's loading, now we just need to tell the API where to draw the map. To do that we're going to write a little JavaScript. Let's get started by inserting this code into the head tags of your HTML file
<style>
div#map-canvas {
width: 500px;
height: 300px;
}
</style>
<script type="text/javascript">
var map = null;
function initialize() {
if (GBrowserIsCompatible()) {
// create a center for our map
point = new GLatLng(37.780764,-122.395592)
// create a new map.
map = new GMap2(document.getElementById("map-canvas"));
// set the center
map.setCenter(point, 15, G_NORMAL_MAP);
}
}
</script>
Now load your html file in your browser and you should see a map centered on the Wired News offices.
== Adding Markers ==
Let's add in marker so users have something to interact with. To do that we'll extend our initialize function. Add these lines just below map.setCenter bit:
markerOptions = {clickable:true, draggable:false };
marker = new GMarker(point, markerOptions);
map.addOverlay(marker);
marker.info_window_content = '<h2><strong>Wired News</strong></h2><p>Home of Monkeys</p>'
marker.bindInfoWindowHtml(marker.info_window_content, {maxWidth:350});
GEvent.addListener(marker, "click", function() {
map.panTo(point, 2);
});
Reload your page in the browser and you should now see a little red pin and when you click it, you should see our little info window.
And that's all there is to it.
== Where to go from here ==
Obviously the GMaps API is far more powerful than this simple example. By itself the Google Maps API might not be the most exciting web service, but when you start mashing it together with other data, it can turn boring address tables into map plotted, location-aware information for your visitors.
Here's a few ideas to get you started exploring some other Google Maps options.
# Include driving direction -- to get the handy "directions to here" links that you'll find on a normal Google map, see the [http://code.google.com/apis/maps/documentation/reference.html#GDirections GDirections class]
# Include map controls - There are a variety of different [http://code.google.com/apis/maps/documentation/reference.html#GControl GMap controls] for your users to pan and zoom. Try adding this line just above the initialize function: map.addControl(new GSmallZoomControl());
# Batch Add Markers - The best way to add markers is to pull info from your database and loop through it when you output the HTML. Just nestle the code from the "Adding Markers" section inside a loop and make the marker names dynamic.
# Custom Markers - There's no need to stick with the default red pin, you can use any image you want, see [http://code.google.com/apis/maps/documentation/reference.html#GMarkerOptions the docs for more details].
# Hide the Google logo and map image credits - Most definitely against the TOS, but if you're so inclined add this to your stylesheet: img[src="http://maps.google.com/intl/en_us/mapfiles/poweredby.png"],
#map-canvas>div:first-child+div>*,
a[href="http://www.google.com/intl/en_us/help/terms_maps.html"]
|
