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!

More Useful HTML, JavaScript and Web Site Programming Articles:

✔ How to Create Predefined Google Image Search Links?

Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....

✔ Can I embed a Facebook search box on my blog site?

I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...

✔ Can I use CSS for drop shadows on my blog?

I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....

✔ How can I embed interactive photo panoramas on my site/blog?

I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...

✔ How can I create a Twitter search URL shortcut?

I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

Let's stay in touch!

Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!

Categorized: HTML, JavaScript and Web Site Programming (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

Reader Comments To Date: 30

Dan Crouch said, on August 30, 2007 3:07 PM:

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!!

dc

J boy said, on July 17, 2008 5:42 AM:

Embedding Google maps doesn't work on MySpace!

Tanka Bar said, on August 11, 2008 4:54 PM:

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?

Darren said, on September 2, 2008 4:50 AM:

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.

AL said, on September 8, 2008 4:44 PM:

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.

Amy Patricia said, on November 1, 2008 1:10 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

Brandon said, on December 7, 2008 5:45 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

Wael said, on March 4, 2009 4:21 AM:

thank you

Irfan Mahmood said, on June 5, 2009 3:01 AM:

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

charles rose said, on July 19, 2009 9:33 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?

Patricia said, on September 16, 2009 2:44 PM:

Thanks for the tutorial, it helped!!!

Naim said, on February 25, 2010 8:53 AM:

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

Nick Wood said, on March 17, 2010 10:30 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.

Zozzie said, on June 11, 2010 12:46 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?

meena said, on June 23, 2010 7:30 AM:

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

Babar said, on August 6, 2010 1:18 AM:

thnx a lot.very useful information

Rujuta said, on September 15, 2010 1:48 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!!!

somnath said, on October 23, 2010 1:45 AM:

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

Rejith VR said, on February 23, 2011 9:15 PM:

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?

george said, on March 30, 2011 11:20 AM:

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

Bruno Vanoudenhove said, on June 27, 2011 5:24 PM:

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

Marco Nunez said, on July 7, 2011 4:18 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!!!!

Abhishek said, on July 10, 2011 4:38 AM:

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

Thank you so much!

Danny said, on August 31, 2011 10:36 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!

vasanth said, on September 2, 2011 12:50 AM:

need code to google map

Dora E. H. Crow said, on September 11, 2011 11:24 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!

vinoth said, on October 17, 2011 10:26 PM:

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

thanx

loga nathan said, on October 17, 2011 10:29 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...

Zhanna said, on November 16, 2011 6:07 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.

kit said, on March 24, 2012 1:09 AM:

Thank you so much, wow that was so easy, and to think I've tried a lot of different methods and none of them worked. Again thanks a lot!

I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

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

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

Reader Comments To Date: 30

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

Check This Out Too...