So you want to embed a Google map into your web page or blog. The easiest and simplest way to embed a Google map into a web page is to use a HTML inline frame, or iframe. This results in a fully interactive Google map anywhere you put the iframe.
Google maps with iframes
In order to embed an interactive Google Map into your web page, you’ll need a properly formatted embed code. You could write this yourself by getting the Google Maps URL query string for the desired map and adding it into an iframe, or you can let Google Maps generate it for you. I recommend the later, it’s significantly easier and less prone to mistakes.
Start by searching Google Maps for the location you want your map to display initially when it first loads. Once you have found the desired location, pick a zoom level and find the Link button in the top left corner, just under the search bar and press it. This will pop up a dialog containing a direct link to the map as well as the embed code we want. Just copy and paste the embed code into your web page’s HTML and you’re done.
Customize the embedded map
If you want to fine tune the appearance of your map, press the “Customize and preview embedded map” link on the box that opens when you press the link button. It is a text link located just under the embed code on the Google maps links box. This will open a new window containing a preview of the map and a number of options. Choose the size of the map, then move the map around until the preview displays what you want. Then copy the embed code into your HTML.
Advanced methods
Using an iframe is actually one of several different methods to embed a Google map. Google offers an extensive Google Maps API Family that allows for the embedding and manipulation of Google Maps on several levels with technologies ranging from Javascript and Flash to the Google Earth API. You can find information and documentation for the entire Google Maps API Family at http://code.google.com/apis/maps/.
While there are many ways to interact with Google Maps, not all of them are well suited for embedding directly in web pages. While iframes work, a more advanced method is to use the newer Google Maps Image API (discussed here) to instantly and dynamically create an image of any map, right on your page. This allows you to display a Google map on your page without all of the disadvantages of iframes (like not being able to print the map with the page!).
