Embedding Google Maps Into a Web Page: A Beginner’s Guide

by on 27th July 2011 with 17 Comments

Google Maps is one of the best utilities to ever hit the web. It has become the standard way for people to get directions online, view satellite and terrain imagery and perform any other map-related task.

There are a number of reasons that you would want to embed a Google Map into your web page, whether it be for functional purposes, such as guiding users to your physical location, or aesthetic purposes, such as using map for a background graphic. Today we’re going to look at two ways you can go about this task: the quick and easy way and the powerful, flexible API route.

Embedding a Google Map

The first thing that we’ll learn to do is a simple and straight embed of a Google map. The functionality here is pretty limited but it’s super easy.

The first thing you need to do is simply go to Google Maps like you would if you were looking for directions. Simply type in the address where you want the map to start.

screenshot

Now click the little link icon in the upper right of the screen. This should pop up a little window that includes a pure link and an HTML snippet, copy the second to your clipboard and paste it into an HTML document.

screenshot

The HTML

That’s all there is to it! This should give you a live map on your web page. However, you’ll likely never want to paste in the code and be done but instead style it to match your needs.

To do this, let’s take a look at the raw code that results:

Now, this may look like a big mess but it’s pretty easy to sort through. The links are really the result of all that nasty-looking code so let’s toss those out just for the purpose of the example. Now the code looks much more manageable.

We can see some pretty basic inline style controls here. For starters, let’s try resizing the map to 600px wide. We can easily wrap that in a div and center it. I’ve also changed the color of the link near the end to white.

screenshot

Let’s say we wanted to have a little more fun with this. Let’s ditch that last link completely and set our width to stretch all the way across the page. The code for this is nice and concise.


screenshot

Going Fullscreen: The Quick and Dirty Way

screenshot

The trick above is perfect for embedding a live map into your contact page, but let’s say you wanted to make the map more of a design feature than a utility. It’s pretty easy to use this same technique and stretch the map over the entire screen.

The HTML

To get started, create two divs, one that will hold any artwork, text, etc. and another for the map. I threw in some basic text for the overlay portion and pasted my map into the second div. Notice that I removed the link portion at the end of the embed link as well as the size styles near the beginning of the link.


 

Fullscreen Google Map

A Design Shack Example

That’s really all the markup that we need. Let’s jump over to our CSS to make everything look pretty and get it stacking right.

The CSS

The first thing you’ll want to do is target the iframe in our map div and set it’s height and width to 100%. This will ensure that our map stretches over the full size of the browser window.

#theMap iframe {
	height: 100%;
	width: 100%;
}

Update: This works in Safari but it turns out getting Firefox to display a div at 100% height is trickier than I thought. Check out this article for details.

Next, we style the overlay. The key here is to set the position property to absolute, which will pull it out of the normal flow of the document and sit it on top of the map. From here we can style and move it into place.

I wanted a slightly transparent black bar so I used rgba set to 90% opacity. From here I added some margin on the top and set the fonts for both text tags using CSS shorthand.

#overlay {
	background: rgba(0, 0, 0, .9);
	color: #fff;
	margin-top: 150px;
	padding: 20px;
	position: absolute;
	text-align: center;
	width: 100%;
}

#overlay h2 {
	font: 200 4em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#overlay p {
	font: 100 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

Get Creative

You can treat the map like any other item on the page, so experiment with changing its shape, applying effects and anything else you can come up with!

screenshot

The Google Maps APIs

We’ve barely scratched the surface of what you can do with Google Maps on your site. In fact, Google has a whole family of APIs aimed at helping you structure, style and embed highly customized versions of their maps.

screenshot

The iframe method above is fun and simple, but the best route to go for embedding maps into your site is probably the JavaScript API. Using this, all you have to do to embed a map is create a div with a specific ID like so:


  

Then you jump into your JavaScript, call a function, set up some options and store them in a variable, and create the map using the ID from the HTML above.

  function initialize() {
  var mapOptions = {some options here}    
  var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

The API provides you with a ton of options for settings like zoom level and which controls are visible. You can even customize the little map markers with your own images.

API Tutorials

If you wanted to get started with the Google Maps APIs, here are some links that you’ll definitely want to check out.

Static Maps

Don’t want an interactive map? Check out the documentation for adding a static map. Many of the features are the same, the result is simply a non-moving image rather than a real map that users can play with.

Conclusion

To sum up, if you want a Google Map on your site with no effort, follow the steps above to go the iframe route. Your control over the map is limited but you can have a lot of fun with how you embed it in the page. If you need more features and flexibility, sign up for a free API key and go the JavaScript route.

Leave a comment below and show us any pages you’ve created with Google Maps. What techniques and resources have you found helpful?

Comments & Discussion

17 Comments

Comments & Discussion

17 Comments

  1. Eric W. says:

    Excellent, just started taking a more active roll in the website for a fake film trailer contest my friends put on here in Portland Or. First thing on the list is plug into Google maps. Your guide outlines the how to very well.

    Cheers,

    Eric

  2. Kim Ruddock says:

    Embedding Google Maps is a very useful way of enhancing a site’s function and usability. I always take out the tag – not exactly sure why it’s in there to be honest. I like the idea of being creative with the map and changing the shape of it rather than just placing it as standard rectangle within a design. With a bit of thought it could become a significant design feature as well as a functional element.

  3. Etube says:

    Hello, and how it adds the new google map?
    google maps api 3? Anyone know how?
    Thanks ..

  4. datta says:

    how to reduce pop address window width

  5. Shirley says:

    Hi Joshua,
    I just found your post and was wondering if you could help me. I am trying to embed a google map into wordpress. That I have accomplished, but I have bbeen trying to remove the “view larger map” linke text at the bottom of the map. Everytime I remove the text for this linked text, when I view the post online, it actually removes everything but the linked text. Could you help me?

  6. Brian says:

    Is there a way using the iframe to remove certain map controls, for example the Map/Sat/Terrain/Earth buttons?

  7. khattak says:

    Brian you can costumize your map by going to this website.there are several functions that ARE ABSENT IN GOOGLE MAPS OFFICIAL WEBSITE. http://www.kabaweb.com/GoogleMapsCreator1.html

  8. Brian says:

    @khattak This page appears to be using the javascript API, not the iFrame embed code. Furthermore, I can’t even see the generated code, I see this: http://screencast.com/t/AhaEN5f5Vtuf

  9. Bing Maps says:

    What about embedding Bing Maps on our website?

  10. ketan says:

    Hi, its nice… but how can i open map in new window that showing me in bubble address.

  11. Aaron says:

    I’ve been after this for a while – I tossed the iframe up on the initial design, but while I’m polishing everything down I found this article walkthrough which eased into the Google Maps documentation beautifully. Final Product is available to view in the bottom fold of my website:
    http://www.legendarylion.com

    Thanks Josh!

  12. Dennis Pepper says:

    If you tap the screen to make Google maps bigger…..
    what to you do to make them smaller

  13. Sas says:

    Thank you. This has been helpful. I have 2 questions:
    1. How can I prevent the white address window from appearing?

    2. How can I replace the marker with my own marker icon?

  14. Thanks for the post. Great tips!

  15. faustbg says:

    Well much of what I have has been said but I will add on a little more. The comany in question is . I was introduced to this by a good friend as he though I was sinking with exam preparation. He recomened the company above that they would do some good work for me while >I concentrated to the more specialised parts. I contacted tham and asked whether the could fulfill the requests I had. One of those to have text book where extensions of the questions were. In just seconds they wrote back giving me assurance that they have all it take to do the work. I now asked them how payements to be conduct which they quickly helped me with. I paid and up loaded the work to be done. I really was impressed by the way things moved fast in here. A few seconds after payment was done, I recieved a message that a write had been assigned my work, this was nothing but good news again. Five minutes later one person from customer support asked me to upload the extensions of the questions. Now this is the very guy who assured me that they would have the text book. He had a name Rob. I wrote back to him telling him what he had promised me and this time I copied and pasted his own mail. He apologised and said they would get the book. Now there was total silence around. I wrote to the writer to find out if he was doing something. He never replied, well I thought he now was so busy. 8 hours before dead line he write asking for an extension. Support writes too asking for the same but none is giving a reason why an extension is needed. When I asked why, I got one of those classic answers, well I could not get the book from any library. Now comparing my home country, I wondered how USA could be this poor to fail to have this book in one of those Libraries. Well I gave in 24hrs. 30 minutes before deadlines the writer send a message expressing how sorry he was for failure to get finished, but promised to send part of the work to me. Before I even responded the work was up and the support service had named this “completed” I wrote to them asking what the meaning of the word completed was in this case, they excused with some silly excuse again. They now ask me to look into it and either approave or ask for a revision. when I looked at the work, I got a shock of how low the the standard was. Beside the fact that I had paid for over twenty pages didnt matter, I only recieved nine pages and nothing but low grade work. I asked these people to refund my money but asked if I had 24 hrs more then they would assign a new writer. I now had one day and half to hand in this work, well I said if this 24 hours is enough then I will use the remaining half day to prepare and hand in. I wrote in and asked this to be the last chance. I got Robs word and he even gave me the number of the new writer. 8 hrs later the writer asks for more information but this was solved again with that good for nothing support man “Rob”. I scanned a few pages and send them in. There was no responce on this. Two hrs to dead line, Support(Zoey) writes accusing me for being late with the deliveries and that this meant a new extension. I now told him that this was enough. He said I had options, either to extend or to ask for a refund. I decided to go for a refund. He directed me on how to do it. On trying to access that place on the site, they had now removed the refund button. I wrote again but no reply came from him. Now some new girl answer directing me in the same place. The button wasnt there. Now I was getting, as it was time to hand in but I was busy fighting for my money and planning re-exam. After an hour I get a message that my work had been upload when I looked at the work it was the first piece of crap and no change same nuber of words,, just same everything. I rejected it and wrote back. Now they send a new piece of the same work with a button refund. When I pressed it, I got two options reject the work and ask for for money without work or reject the work, ask for money and take the work. I chose the first because it was very minor standard which I could not even hand or two it was also beyond dead line.
    As soon as I pressed refund an automatic message came in that according to their policy I had to make the same piece of work and hand in to them in seven day or else I dont get arefund. When I asked why this was to make sure I didnt use their writers work. I found thie silly coz I imagined a company that had fail to meet a deadline fourt imes now was bust setting deadlines up for me. When I wrote to them asking about this some girl Bella said she would comment on that before the manager get into the case . Remember time was running for the work I had to hand in to them

    DEAR FELLOW STUDEND RUN AS FAR AS YOU CAN GET AWAY FROM THESE COMPANIES THEY ARE UP TO NOTHING BUT SCAM yOU GOT THE SITE AND TELEPHONE NUMBERS TO THIS COMPANY for you safety here you go

  16. frank says:

    I created a map with several pins indicating I spoke there. Embeded the link into my web site. However, when clicking on the “full screen” icon my Google account information is available. How do protect my personal information?

Leave a Comment

Subscribe
Membership
About the Author