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:
<iframe marginheight="0" marginwidth="0" src="http://maps.google.com/maps?client=safari&q=phoenix+az&oe=UTF8&ie=UTF8&hq=&hnear=Phoenix,+Maricopa,+Arizona&gl=us&ll=33.448377,112.074037&spn=0.040679,0.07699&z=14&output=embed" frameborder="0" 1height="350" scrolling="no" width="425"></iframe><br><small><a href="http://maps.google.com/maps?client=safari&q=phoenix+az&oe=UTF8&ie=UTF8&hq=&hnear=Phoenix,+Maricopa,+Arizona&gl=us&ll=33.448377,112.074037&spn=0.040679,0.07699&z=14&source=embed" style="color:#0000FF;textalign:left">View Larger Map</a></small>
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.
<iframe marginheight="0" marginwidth="0" src="LINK" frameborder="0"
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 <iframe marginheight="0" marginwidth="0" src="LINK" frameborder="3" 2height="350" scrolling="no" width="600"></iframe><br><small><a href="LINK" 3style="color:#fff;text-align:left">View Larger Map</a></small>
</div> <div id="theMap">
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. 1height="280" scrolling="no" width="100%"></iframe><br>
<iframe marginheight="0" marginwidth="0" src="LINK" frameborder="3"
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. 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. 01<div id="overlay"> <h2>Fullscreen Google Map</h2> 02 <p>A Design Shack Example</p> 03 </div> 04 05 <div id="theMap"> 06 <iframe marginheight="0" marginwidth="0" src="LINK" frameborder="0" 07scrolling="no"></iframe><br><small><a href="LINK"><br> 08</a></small></div><small><a href="LINK"> 09 10</a></small>
Thats really all the markup that we need. Lets jump over to our CSS to make everything look pretty and get it stacking right.
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.
01#overlay { 02 background: rgba(0, 0, 0, .9); 03 color: #fff; margin-top: 150px; 04 padding: 20px; 05 position: absolute; 06 text-align: center; 07 width: 100%; 08} 09 10#overlay h2 { font: 200 4em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans11serif; 12} 13 14#overlay p { font: 100 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans15 serif; 16 } 17
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!
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.
1function initialize() { 2var mapOptions = {some options here} 3var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 4
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 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 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 youve created with Google Maps. What techniques and resources have you found helpful?