HOW TO: Embedded Google Maps
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.
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.
<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 <a href></a> 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.
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.
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.
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.
If you want to see what the html for a completed map, such as mine, looks like just take a gander at the source code for this page. Also, any questions can be sent to me here or 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.
Hi,
Great intro! I noticed that the text in the InfoWindows seems to be wrapping unexpectedly instead of going the whole width of the InfoWindow. Is there a setting or technique to get the text to display correctly?
Thanks.
Joe: That one is still a mystery to me.
I wrote a wrapper around GMapsEZ that will take a XML file and output a map thats easy to embed as well, using this you can create maps with loads of points by just editing the XML:
http://www.devco.net/pubwiki/GMapsPHP
Awesome! Thanks for letting us know.
You could also use XMaps (http://xmaps.busmonster.com/documentation.html) there is a bit more javascript to do, but it is huge, you can draw almost anything on the map, not only these markers (see the link on my name for a “beta” example).
Joe, you can put whatever you want in that div for the InfoWindows, almost any html will go. So you can put a span or another div with css style you need. Look at BeenMapped (http://www.beenmapped.com/) for example of what you can do with InfoWindows.
I’ve written a PHP class called Phoogle Maps that does basically the same thing that this javascript library does. I’ll give the link as an alternative to your method of doing things: http://www.system7designs.com/codebase
Asfar as text wrapping in the div I think you have to give it a clear in the divs CSS, I found the answer to this at one point, I’ll have to dig around and see if I can find it
Hey, your site! Its yellow!
Cool write up too. Very helpful. But get ready for some stalkers now that they know where you live.
Hey I like the new colors of your site. I might have to see about putting Google Maps somewhere on my site, which is alot better now. Thanks for the great tips Paul.
Hi! Great article, I’m so glad I found your site! I read this article this afternoon and started implementing it right away on my bands website. Click here to go to the site, then click on the tourdates button on the left…
I think the issue with the text wrapping in the DIV was related to firefox… it looked fine when I tested it in IE. I fixed it on my site by making a 1X1 table with a width of 200 pixels inside each DIV tag containing the InfoWindow content. This might not be the “right” way to fix it, but it seems to have worked nonetheless.
Thanks again, and I’m looking forward to future articles!
I’ve been playing with GoogleMaps lately [http://paragliding.cotasson.info/].
To avoid text-wrapping you have to set a minimum width attribute within a DIV element
(see HTML source).
HTH.
Hi everybody, does anybody knows what’s happening with Flickr, check out any Flickr Flash Slideshow or Flickr badge with Internet Explorer and that does not show up, I’m pop up a page not available message. So does anybody know what’s happening.
Paul B: Glad you could make use of my tutorial. I love your implementation and styling of the info bubbles!
Here’s an interesting question…I’m setting this thing up (and thanks for the GREAT tutorial as well as the other contributors’ notes!) and it looks pretty decent so far (here), but as you can see (unless I get this figured out before you look) the color of the info balloon doesn’t match my site design.
Obviously this is a minor issue that can go without correction, but does anyone know how to change the color of the surrounding ballon and structures (border and close button)? That would make this the closest thing to a perfect new design tool since the invention of Dreamweaver…
Here’s a cool blog with tons of people ideas for maps they created.
http://www.coolgooglemaps.com
Just wanted to see the cool effect, sorry.
I am trying to get a question answered, and thought you could help. I’m creating a Google map and find that in IE 6, the info windows display perfectly when the marker is clicked. Ditto for Firefox 1.5. However, in Firefox 1.0.7, the text does not wrap within the window — just runs in a straight line out the window and off the map.
To see my test map, you can go to http://www.geocities.com/Athens/4209/maps/gmapexmple4.htm
Do you have any ideas how I can fix this? I know it is possible, and someone suggested using a tag in a thread I found, but I’m not sure how this would work, especially since I’m just figuring out how to use xml and xsl for my map’s information and styling.
I have been using gmapsez for some time and it’s been a great feature that many of my clients like.
Now that Version 2 has come out, I’ve read as much as I can at Google Maps API Version 2 documentation, but since I am using maps EZ, I cannot seem to get the new version to work at all.
Do you know where I can get help with gMapEZ for google maps api version 2 ?
It really was so easy to install and get this program to work and now I am just totally confused and cannot get the new version to work.
One of my maps is at this link, but this is for version 1 http://www.mississauga4sale.com/listings-google-maps.htm
Please, can you tell me what I am missing here in the big picture? I love google maps function and don’t want to lose it’s use.
Do I have to start from scratch and learn all about the new documentation?
Any help would be appreciated.
Thank you,
Mark
hey paul - is it too early to be able to put the google calendar on our WP blogs? Or do you know any secrets? Oh and I enjoyed your podcast on 101 the other day!
great howto!
great tutorial. thanks a lot. question, what do you have your tag font set as? the drop a comment like its hot doesn’t look like the usual sans-serif. mscopino@biblio.org if you ever have time to answer that. thanks again.
paul
thanks for that response last night. i went to the gmapez site looking for an answer.
what i found was this:
you say use this in the head of your document for the api key:
they say use this:
seems to have worked.
thanks again
How do you center the map on the page once it is completed?
I need help with this. It just won’t let me move it at all. is there a piece of code I can add to it to center it? Thanks guys.
I built a tour of our entire trip inside of Google Earth. Is there a way to export it out into a map that I can display on my site, instead of building the trip all over again, URL by URL?
Any help greatly appreciated!
I want the html codes for the small google search thingy (just like the google homepage but only smaller in size.) on the sidebar of my blog. Please mail it to me. If ya got some more of these plzzz contribute them.
thank you.
Hi
We’ve created a tool that allows you to create customised maps with Google Maps that you can embed in your website quickly and easily. You can add overlays with further information, too, if you wish. If it sounds of interest, take a peek at http://www.aardvarkmap.net
Good luck everyone…
Paul
Hi Paul,
This is a very helpful post you have provided herein. You make reference to ‘the map you display at the bottom of this post’ and yet I cannot find your map.
Can you send me the url of your google map using GMapEZ such as the one I am using at http://www.mississauga4sale.com/listings-google-maps.htm so I can compare the two?
Thanks again for everything,
Mark
Hi all,
I have just launched a website that is like TinyUrl.com but for maps. You can embed maps onto your website, get detailed Travel Directions from/to most places, call the map anything you like,etc. As it is also free, you can take a good look at it at http://useamap.com . The full feature list is available here:http://blog.useamap.com/?p=21
Thanks.
Vincent Glennon
Ireland
Hello,
Does anyone know how to get the map embedded on a site to start in hybrid mode? Thanks!
O.
Hi,
In reply to an above comment, you can create an embedded map that loads in hybrid mode quickly on http://useamap.com . Simply find your location in hybrid mode on the map and save it. Then click on embed map. You will be given code to embed the map onto your site, and your site will now load a hybrid mode map of your location every time. You can also quickly change it to another map type by changing the map settings within useamap.com
Best regards,
Vinny Glennon
Hi,
An above comment asked how to embed a map to start in hydrid mode. This is very easy with Useamap.com to do. Just create a map in your desired mode, grab the embed code, and put onto your website. Simple and quick.
Vinny
Nice, but a little complicated maybe. Ongopongo.com has a tool to embed Google My Maps and it’s a bit simpler. You can also share your maps and other stuff.
Dang, I jsut found this post today (5-12-2007) and it is EXACTLY what I need, but the site with the gmapez.js file is down.
Paul, I’m in Atlanta and a Tech fan even though my duaghter is at UGA. Thanks for the post. Hopefully someone can tell me where I might get the javascript file.
My email addy is easily locatable on my website under Contact Us.
Paul - thought about updating this with the new embed feature from Google? Unfortunately, it uses iFrames, so it’s not valid code. Wondering if you know of a workaround yet.
Cheers,
Duce
@motherduce - thanks for reminding me, I’ve been meaning to update this post. I’ll look into it and report back.
Cool, thanks Paul.
I am implementing google maps and markers. When I click a marker, details about that marker are shown in an info window along with a short map showing that marker only. All the info is showing fine but the map does not show.
Also when the infowindow is displayed, all the links and fonts on other parts of the page are affected and changed which is weird.
I would really appreciate if you could offer some help.
Good headstart for implementing the code, api has changed tho
Paul, I’m a novice using Front Page (I know, I know, I’m not a fan of anything ‘MS’ either, I’ll get better.). Any idea why the google map code keeps crashing my Front Page session and causing it to ’send error report’ then reboot Front Page?
Is it something I’m doing wrong or just stock standard typical Mr Gates & co?
I’ve put an inline frame in the draft web page. I put the code in as you’ve advised above. I’ve aquired an API key and followed the instructions. I’ve tried just a simple link to the map. In all cases it crashes FP on me whilst trying to obtain the map.
Any ideas?
Thanks in advance.
J.
deja de ser gueva…..este tutorial no sirve…..incluiste toda la pagina