Embedding Google Maps Into a Web Page

8/13/2019 Embedding Google Maps Into a Web Page

1/7

Embedding Google Maps Into a Web Page: A Beginners

Guide

byJoshua Johnsonon27th July 2011 with21 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 were going to look attwo 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 well learn to do is a simple and straight embed of a Google map. The

functionality here is pretty limited but its super easy.

The first thing you need to do is simply go to Google Maps like you would if you were lookingfor directions. Simply type in the address where you want the map to start.
http://designshack.net/author/joshuajohnson/http://designshack.net/author/joshuajohnson/http://designshack.net/author/joshuajohnson/http://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/#disqus_threadhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/#disqus_threadhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/#disqus_threadhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/#disqus_threadhttp://designshack.net/author/joshuajohnson/


2/7

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.

The HTML

Thats all there is to it! This should give you a live map on your web page. However, youll

likely never want to paste in the code and be done but instead style it to match your needs.

To do this, lets take a look at the raw code that results:

1

View Larger Map

Now, this may look like a big mess but its pretty easy to sort through. The links are really the

result of all that nasty-looking code so lets toss those out just for the purpose of the example.Now the code looks much more manageable.

1
View Larger Map
http://maps.google.com/maps?client=safari&q=phoenixhttp://maps.google.com/maps?client=safari&q=phoenixhttp://maps.google.com/maps?client=safari&q=phoenixhttp://maps.google.com/maps?client=safari&q=phoenixhttp://maps.google.com/maps?client=safari&q=phoenixhttp://maps.google.com/maps?client=safari&q=phoenix


3/7

We can see some pretty basic inline style controls here. For starters, lets try resizing the map to

600px wide. We can easily wrap that in a div and center it. Ive also changed the color of the link

near the end to white.

1

23

View Larger Map

Lets say we wanted to have a little more fun with this. Lets 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.

1


4/7

Going Fullscreen: The Quick and Dirty Way

The trick above is perfect for embedding a live map into your contact page, but lets say you

wanted to make the map more of a design feature than a utility. Its 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. Noticethat I removed the link portion at the end of the embed link as well as the size styles near thebeginning of the link.

0102

03

04

0506

07

080910

Fullscreen Google Map

A Design Shack Example

Thats really all the markup that we need. Lets jump over to our CSS to make everything look pretty and get it

stacking right.
http://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/tutorialexamples/GoogleMaps/index.htmlhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINK


5/7

The CSS

The first thing youll want to do is target the iframe in our map div and set its height and width to 100%. This will

ensure that our map stretches over the full size of the browser window.

12

34

#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 articlefor details.

Next, we style the overlay. The key here is to set the positionproperty 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 rgbaset to 90% opacity. From here I added some margin on the

top and set the fonts for both text tags using CSS shorthand.

0102

03

0405

06

07

0809

101112

13

14

1516

17

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

}

#overlay h2{font: 2004em/1.5em"Helvetica Neue", Arial, Helvetica, Geneva, sans-

serif;}

#overlay p {font: 1001.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 andanything else you can come up with!
http://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINKhttp://designshack.net/articles/html/embedding-google-maps-into-a-web-page-a-beginners-guide/LINK


6/7

The Google Maps APIs

Weve 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.

The iframe method above is fun and simple, but the best route to go for embedding maps into your site is probably

theJavaScript API.Using this, all you have to do to embed a map is create a div with a specific ID like so:

1
http://code.google.com/apis/maps/documentation/javascript/http://code.google.com/apis/maps/documentation/javascript/http://code.google.com/apis/maps/documentation/javascript/http://code.google.com/apis/maps/index.htmlhttp://code.google.com/apis/maps/documentation/javascript/


7/7

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.

12

3

4

functioninitialize() {varmapOptions = {some options here}varmap = newgoogle.maps.Map(document.getElementById("map_canvas"),

mapOptions);

The API provides you with a tonof 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 youll definitely want to check out.

Official Google JavaScript API Tutorial Wade Hammes: Setting a Google Map as the Background of your Web Site

Static Maps

Dont want an interactive map? Check out the documentation for adding astatic 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 youve created with Google Maps. What techniques and resources

have you found helpful?
http://code.google.com/apis/maps/documentation/javascript/tutorial.htmlhttp://code.google.com/apis/maps/documentation/javascript/tutorial.htmlhttp://blog.wadehammes.com/post/3837158298http://blog.wadehammes.com/post/3837158298http://code.google.com/apis/maps/documentation/staticmaps/http://code.google.com/apis/maps/documentation/staticmaps/http://code.google.com/apis/maps/documentation/staticmaps/http://code.google.com/apis/maps/documentation/staticmaps/http://blog.wadehammes.com/post/3837158298http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Embedding Google Maps Into a Web Page

Documents

Transcript of Embedding Google Maps Into a Web Page