How can I embed a Google Map on my Web page?

I've seen some professional service provider sites that include a nice little map within their About page, a map that actually hooks up to Mapquest or similar. I much prefer Google Maps, but am stuck: is there some way to actually embed a Google Map on my Web page or, for that matter, my MySpace profile?

Dave's Answer:

Until very recently, the answer would have been "no, sorry" or "not without some serious hacking", but Google's just opened up its terrific Google Maps application in a way that makes this task fairly straightforward, whether your target is a Facebook or MySpace profile, a blog entry, or even a traditional Web page or site.

The first step you'll need to take is to go to Google Maps and map an address, either of your office, your home, your favorite restaurant, whatever. I mapped the location of some house or the other that our tax dollars help paint every few years:

Google Maps: The White House, Washington DC

The key is to now click on "Link to this page" on the top right, which pops up a small window that contains two links:

The second of those two links is what you'd want to cut and paste, and the result would look like this:

View Larger Map

Nice, but truth be told, I'd prefer it were a bit smaller if I am going to include it on a Web page, so click on "Customize and preview embedded map" and you'll get a new window with a variety of options:

Now I can choose "Small" and grab the resultant code at the bottom of that page. The result? Here we go:

View Larger Map

Nicer. Anyway, whatever size you want, you now have a slick way to add a Google Map to your Web page (or blog entry, as demonstrated in this very article). Good luck!

Categorized: HTML and CSS (Article 7540, Written by Dave Taylor)
Tagged: google maps, mapquest, white house
Previous: How do I convert a DVD movie for my iPhone and iPod?
Next: Beware the Mystery Shopping Company Cashier's Check

Subscribe!

Never miss another Q&A article! Click to subscribe:

Comments

After reading through the maps API documentation numerous times trying to figure out how to embed a 'my map' on a page, I was pointed to your article and it worked like a charm -- not to mention much much easier than working with the API. Thanks!!

Posted by: Dan Crouch at August 30, 2007 3:07 PM

Embedding Google maps doesn't work on MySpace!

Posted by: J boy at July 17, 2008 5:42 AM

I can't get this to work on myspace because it uses iframes which are prohibited on myspace. Any luck on finding a way to use it on myspace?

Posted by: Tanka Bar at August 11, 2008 4:54 PM

MySpace will not support the functionality (right too - people could do alot of damage if they did) - There is no way to add this to myspace, they may release an application or embeded custom object that allows you to so (this would stop the security risk) but as of now, your best bet is to make an image of the map, link it to google maps externally.

Posted by: Darren at September 2, 2008 4:50 AM

Is there a way to get the directions localized on an embeded page as opposed to the directions taking you to the google maps page upon search? I'd like the results to stay on my page.

Posted by: AL at September 8, 2008 4:44 PM

Hi,
Tried to embed google map at site I'm developing and received the following error message upon display: Forbidden
Your client does not have permission to get URL /maps?f=q&hl=en&geocode=&q=Brian's+Custom+Framing+and+Art+Gallery,+201+Wolf+Street,+syracuse+NY&ie=UTF8&layer=c&cbll=43.069852,-76.165248&panoid=tp8gVYl0Wdki85NNkSY6SA&cid=43069868,-76165251,1460987307468310944&s=AARTsJpxcdXb1rxOEOcmbhcXfCy9uTuFnQ&ll=43.070769,-76.163063&spn=0.01881,0.025749&z=14&output=embed from this server. (Client IP address: 74.71.96.176)
Is there anything I can do to display map? I'm using Dreamhost as a hosting service...is that why? Thanks, Amy

Posted by: Amy Patricia at November 1, 2008 1:10 PM

If you want to instantly embed popup Google Maps for all the locations on a page, try MapMyPage. MapMyPage is the fastest, easiest way for bloggers and website owners to add Google Maps to any website. Just copy one line of JavaScript into a web page and MapMyPage will automatically add Google Maps to all the locations mentioned in the page.

http://www.mapmypage.com

Posted by: Brandon at December 7, 2008 5:45 PM

thank you

Posted by: Wael at March 4, 2009 4:21 AM

I need search base google map for my website and blog how to get it?

Posted by: Irfan Mahmood at June 5, 2009 3:01 AM

I HAVE A WEBPAGE AND HOW CAN I SEND IT OR EMAIL IT TO ANOTHER PERSON BECAUSE ON THE WEBPAHE THERE IS NO PLEASE TO PUT AN EMAIL ADDRESS>

SECOND, IF I OPEN MY COMPUTER, HOWWWw TO I FIND MY WPBAGE?

Posted by: charles rose at July 19, 2009 9:33 AM

Thanks for the tutorial, it helped!!!

Posted by: Patricia at September 16, 2009 2:44 PM

Hi,

I am trying to implement a google map search in my website but the search button for some reasons doesn't work when I tried to search for any specific address.My map is in derived pages coming from master pages. Can you give me any clue?
Thanks for help and if you could write me back in email

Posted by: Naim at February 25, 2010 8:53 AM

No professional business or company would use a Google map API even the enterpise version you pay for is not that great. Google have just lost their licence for postcode's in the UK and already companies have seen issues with the Free platform (which is the basic service) and not very flexible.

Top mapping tool must be ViaMichelin.

A independant poll carried out by the IMA said

1. ViaMichelin
2. Mappy
3. Microsoft
4. Yahoo
5. Map 24
6. Google

Poll was based on brand, quality, customisation, coverage, support, SLA, price, usability, speed, and 17 other criterias.

Posted by: Nick Wood at March 17, 2010 10:30 AM

I have a blog, I want to have a map in it AND be able to have people add things to it that builds and builds. Can I do this?

Posted by: Zozzie at June 11, 2010 12:46 AM

thank you sooooo much dear.... u rock man... gud luck...

Posted by: meena at June 23, 2010 7:30 AM

thnx a lot.very useful information

Posted by: Babar at August 6, 2010 1:18 AM

Hey, thanks a lot, it was really confusing trying to decipher how to add a map on google maps. This is a very easy way!!!

Posted by: Rujuta at September 15, 2010 1:48 AM

it is not working in ie7.can anybody help me..

Posted by: somnath at October 23, 2010 1:45 AM

I Am doing my Final Year Project of MTech Embedded system. In my project it having website. For web designing i am using visual studio dot net. How the google map embedded in the web page that will created under the dot net plateform?

Posted by: Rejith VR at February 23, 2011 9:15 PM

these info has helped a lot to decipher how to add google map to webpages...this is very good

Posted by: george at March 30, 2011 11:20 AM

Hi Dave,
I'm in the process to create a free access website that will help people to visit an area ( Building, Parks, Attraction, etc}.
I would like to include a map with the step by step visit of this area Like the “My Maps” from google, with lignes and shapes and pictures.
In addition, in the website in order to make some money I would like to integrate affiliates programs like, Hotels.com, concert tickets sale, city pass, and Google.Adsense,
I was wondering if you could help me to know if Google accept embedded “My Maps” on this kind of website with affiliate program or is there a fee to pay?
Are you considering this kind of website Professional?
I read Google terms and policy but i'm not clear.

In advance thank you for your help.

Bruno

Posted by: Bruno Vanoudenhove at June 27, 2011 5:24 PM

Very helpfull tip, I found you in google so fast, and take 10 minutes to build a map for a customer, next, will be in my website.

Thanks!!!!

Posted by: Marco Nunez at July 7, 2011 4:18 PM

I am a website designer and this was really helpful for my recent project.

Thank you so much!

Posted by: Abhishek at July 10, 2011 4:38 AM

Dear Dave,

I have been struggling to get Google Map embeded in my website until I read and used your way to get it. Thank you so much for sharing this!

Posted by: Danny at August 31, 2011 10:36 AM

need code to google map

Posted by: vasanth at September 2, 2011 12:50 AM

This works! Google's instructions said to go to My Places, and then Create Map. The problem was that I kept getting an error, "map cannot be embedded."

Your method is much easier, and more importantly: it WORKS!

Thank you!

Posted by: Dora E. H. Crow at September 11, 2011 11:24 AM

nice postings thanks for sharing,,,, about how to add google map in our site with image example...keep continue your postings...great efforts

thanx

Posted by: vinoth at October 17, 2011 10:26 PM

Thanks for sharing nice resource with step by step example about how to add gmap ....It is more helpful to all beginners thanks dude...

Posted by: loga nathan at October 17, 2011 10:29 PM

Thanks, Dave! I hope this time it will work. I am struggle to have a good map for the city and looks like Google map is the best.

Posted by: Zhanna at November 16, 2011 6:07 PM

I have something to say, now that you mention it, but ...

I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you for all your efforts on this Web site by buying you a cup of coffee!

I do have a comment, now that you mention it!