It seems like someone releases another cool use for Google Maps every week. You have likely seen the ever popular Frappr service, based off of Google Maps. After Google Released the API for their popular Google Maps service, integrating maps into your site could never be easier. This article shows you how to embed a customized Google Map into your website or blog.
Update 1-16-2011: This post is very old. Google's Maps API now has excellent documentation for getting started.
Before you do anything, as with most API-based web services, you will need to attain an API key before you are able to use the service. Head over to this Google Maps page to sign up for an API key. Signing up is pain free and you get the API-key right after you click on Generate API Key.
You then need to download the gmapez.js file from this website and host it somewhere on your website. The actual code necessary to make the map appear on your blog entry or website relies on using an iframe, so you will need to make another html file that the iframe will read from.
Below is the code you will need to put in that html file; a few things will need to be changed so keep on reading.
<!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">
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=YOUR_GOOGLE_MAPS_API_KEY_HERE" type="text/javascript"></script>
<script src="http://www.YOURDOMAIN.com/path/to/gmapez.js" type="text/javascript"></script>
</head>
<body>
<div class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl" style="width: 400px; height: 400px;">
<a href="YOURGOOGLELINK">
</a>
</div>
</body>
</html>This is the basic skeleton of code needed to get a Google Map running on your site. You will have to give it your Google API key as well as a valid url to your gmapez.js file. One more thing is the actual Google Maps link for the area you want shown on the map. Go to maps.google.com and find the location you want to be shown, double click on it and then copy the link via the Link to this page at the top right of the Google Maps site. Paste that url in the code above where it says YOURGOOGLELINK. This will automatically center the map on a marker of that location. You can create new markers my creating more and more type tags. Placing a capital letter between those tags will display that letter as the marker instead of the default dot. You can find out more about various configurations at the GMap EZ site.
Now to actually placing the code on your site. The piece below goes on the actual blog post or website page. Make sure to feed it the proper URL to your html containing the code above.
<iframe src="http://www.YOURDOMAIN.com/pathto/YOURCODE.html" width="500" height="500"></iframe>Adding Info Bubbles
So you've got the gist of this Google Maps thing down, now lets add some spice and kick it up a notch. The next thing you can do is add an info bubble to your markers. This can easily be done by adding a div tag containing the information you want displayed right after the appropriate <a> tags (all within the main div that has the GMapEZ class) . You can even add images just as you would in any other html file. Below is the one I used in my example.
<div><img align="right" src="https://paulstamatiou.com/wp-images/paul.jpg"/>My Dorm at Georgia Tech</div>Specifying Default Map Type
Whenever your page containing the Google Map is loaded, you can determine what view the user will get. Go into the html file you created and find the first div tag section; it is right after the body tag. All you need to do is add one of the following tags where it says class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl".
These are the tags you can use: G_MAP_TYPE, G_SATELLITE_TYPE, G_HYBRID_TYPE. The first displays the most common map view, then satellite view and finally hybrid, which displays a map over satellite view.
For example the code in your html should look like this after you've added a tag.
<div class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl" style="width: 500px; height: 500px;">
<a href="YOURGOOGLELINK">
</a>
</div>Different Map Controls
The map I display at the bottom of this post uses large map controls, but you also have the option of small and mini controls. To use small controls change the div class to class="GMapEZ GSmallMapControl" instead of the current value of class="GMapEZ GLargeMapControl GMapTypeControl GScaleControl". Mini controls can be set with class="GMapEZ GSmallZoomControl GSmallMapTypeControl".
Auto Open Marker Info
You can have the information for a marker automatically open when the map is loaded (opposed to it opening when it is clicked) by placing OPEN within the <a> tags for that marker.
Any questions can be sent via the comments below. I encourage commenting as someone else might have the same question.
It seems the embedded map stopped working. I wrote this a long time ago and haven't had the chance to look through it yet. I think it might have something to do with Google's updated API.