Blog How to Add a Google Map to Any Web Page in Less than 10 Minutes
Most people really like the embedded Google Maps, but don’t know how easy it is to add them to any page. I’ve had a few people ask me how it is done. With a little bit of HTML knowledge, anyone can quickly have a map up and running in just a few minutes.
Here is an example of how you can add a map to any contact us page or blog quickly and easily.
First you need a Google Maps API key, which is free. You can find it, along with other documentation, at http://www.google.com/apis/maps/. Bookmark this link - it has lots of details you might want, especially if you extend your new map beyond this example.
Follow the instructions to "Sign up for a google API key". You’ll need a gmail account, and to enter your domain name. This key can then only be used on pages served from that domain name. If you are going to develop on a different server, then you might want to get 2 keys - one for your development server, and then one to switch over to when you publish it to your site. (In Exploration Age, we have several keys that are automatically selected based on which environment the code is running in)
Along with your key, Google will give you a bit of starter code that looks something like this. (note some lines that shouldn’t be wrapped like they are here due to space limitations. Make sure your SCRIPT tags are all on one line.)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="http://maps.google.com/maps?file=api&v=1&key= [YOURKEY]" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px"></div> <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4); //]]> </script> </body> </html>
You’ll have a different key string in the SCRIPT tag, generated by Google to match your domain name. In order to add a map to your site, all you have to do is cut and paste the right pieces of code from the Google example. First off,
<script src="http://maps.google.com/maps?file=api&v=1&key= [YOURKEY]" type="text/javascript"></script>
This script include does 2 things. First, it links in the javascript you need to run the map, and second, it let’s Google know who you are with the embedded key. Add this SCRIPT tag somewhere on your page (above the other code below.)
Next, you’ll see this div:
<div id="map" style="width: 500px; height: 400px"></div>
This is actually where the map will appear on the screen. Put this div whereever on your page you want the map to show up. Be sure to update the width and height styles to match how big of a map you want on the page. Finally, you see this javascript:
<script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4); //]]> </script>
Google’s code is a little flaky in Internet Explorer, so make this quick modification to the code so it will work better. Essentially, it allows everything to load before trying to draw the map (and might save you some IE crashes)
<script type="text/javascript">
//<![CDATA[
window.onload = showMap;
function showMap()
{
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
}
//]]>
</script>
This is the code that actually draws the map. Place this in your XHTML anywhere after the map DIV. The first line instantiates the map and assigns it to the map div. The second line adds the little pan and zoom controls. Finally, the third line centers the map on a point and sets the zoom level. Now you’ll have a map, but it’s pointing at the Google headquarters in Palo Alto! How do we get coordinates and point the map at where we want? Even better, how do we get one of those little Pins on the map?
if (typeof TS_load_timers == “object”) TS_load_timers.start(”load maps.30a.js”, “glm_maps.30a.js”); if (typeof TS_load_timers == “object”) TS_load_timers.end();
//&amp;amp;amp;amp;amp;amp;lt;![CDATA[ window.onload=showMap2; function showMap2() { var map = new GMap(document.getElementById(”map2″)); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4); showMap3(); } //]]&amp;amp;amp;amp;amp;amp;gt;
Piece of cake. First, you need to find the latitude and longitude of the place you want on the map. We’ll use Google. Go to http://maps.google.com and use the pan, zoom and search functions to find what you want to link to. Once you’ve found it, double click right on the spot to center the map there. Finally, click on "link to this page", and take a close look at the URL. When I look at Powell Butte Park, I get this url
http://maps.google.com/?ll=45.484206,-122.499447&spn=0.031833,0.069523
Luckily for us, it contains the latitude and longitude (see the ll=45.48… line? That is the coordinates). Now, we just have to enter those coordinates in our script to get our map centered on the same spot. Modify the map.centerAndZoom line with your new coords. Like so:
map.centerAndZoom(new GPoint(-122.499447, 45.484206),;
Now your map will point at the new coordinate. Also, you can play around with the last number (4) to change the zoom level, try 8 like the example above.
//&amp;amp;amp;amp;amp;amp;lt;![CDATA[ function showMap3() { var map = new GMap(document.getElementById(”map3″)); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(-122.499447, 45.484206), ; showMap4(); } //]]&amp;amp;amp;amp;amp;amp;gt; Finally, we can add a point by adding one line of javascript right after the map.centerAndZoom command.
map.addOverlay(new GMarker(new GPoint(-122.499447, 45.484206)));
Notice we use the same coordinates as the map.centerAndZoom command.
//&amp;amp;amp;amp;amp;amp;lt;![CDATA[ function showMap4() { var map = new GMap(document.getElementById(”map4″)); map.addControl(new GSmallMapControl()); map.centerAndZoom(new GPoint(-122.499447, 45.484206), ; map.addOverlay(new GMarker(new GPoint(-122.499447, 45.484206))); } //]]&amp;amp;amp;amp;amp;amp;gt;
Viola!! You have your very own, fully interactive Google map. If you want to get fancy, study the API documentation to learn about the other features already built in.
