Adding a Google Map to Your Web Page
June 15th, 2009 by Gage Pacifera
Note: This post is one of a series of posts that breaks out the individual topics of my presentation “Pimp My Web Page†given at WebVisions 2009. You can see the fully pimped page that includes the code detailed below at http://pimpedblog.harmonicnw.com. Code tested for XHTML 1.0 Strict pages on IE 6 and 7 for PC, Firefox 3 for PC/mac, Safari 4 public beta for mac.
Google gives you some cut-and-paste code to embed a map in your HTML, so it’s really really easy to add a map to your web page. The steps are:
- Find map at maps.google.com
- Click Link in the upper right
- Click Customize and preview embedded map
- Customize and preview
- Copy code
- Paste code into HTML
I won’t expand too much on this as there are already some good tutorials out there for adding maps this way. Using this method you can choose all sorts of map parameters, including map size, location, zoom level and view type (map, satellite, terrain, etc.)
Pinpointing Tip
The only other useful thing I think I can add here is a note about pinpointing the specific location. I have found that if I type a location like “Oregon Convention Center,” I’ll likely get more than one pinpoint on my map. If I want just one pinpoint, I should copy the exact address of my location and put that in the search box. So, for example, I would want to use “777 NE ML King Blvd., Portland, OR” rather than “Oregon Convention Center” to get just one pinpoint.
Using the Google Maps API
If you want to do something fancier than just embed a map on your page, then you’ll want to use the API. It’s free and there is lots of documentation.
If you just want a plain static map image, check out the Google static map API.