In the "Creating Maps using Custom Maps for Google Maps " tutorial, we showed you some possible uses of maps for your organization. Now, we'll show you how to embed a map into your website or blog (depending upon your location). You can embed a simple map, a set of driving directions, a map you created using Custom Maps for Google Maps, a map of a local search or maps created by other users into your website.
You'll probably want to embed the map directly onto your own site. For the purposes of this tutorial, we'll be using Blogger to demonstrate how to embed your map into a website and a blog post. If you don't have your own site or you'd like to learn how to add maps to your blog posts, you'll find instructions on how to do this using Blogger in this tutorial.
1. Go to Google Maps. Open the map that you wish to embed in your website. You can embed a map of driving directions, a local search or a map you've created using Custom Maps. If you want to view your saved maps, sign in with your Google Account. If you don't have a Google Account, sign up here.
We're going to use the Santa Cruz Beach Cleanup page we created in the "Creating Maps using Custom Maps for Google Maps" tutorial.
2. Click Link to this page and copy the code from the Paste HTML to embed in website field. To resize and preview the map, click Customize and preview embedded map. Keep in mind that you won't be able to embed Traffic maps, Street View imagery, or Mapplets.
3. Go to your webpage editing application and locate the best place for the map within your website. (See below for examples using Blogger).
4. Paste the map code you copied into the HTML code where you'd like your map to appear on your website.
5. Save your web page and view the map you just embedded!
1. Go to Blogger and open your blog dashboard. If you don't have a blog, creating one is easy! Login to your Google Account and follow the simple steps to create your blog.
2. Once you're in the dashboard, open the "Posting" tab and select "Create."
3. Enter the post's title and any text to go with your map. Click on the "Edit HTML" tab.
4. Going back to Google Maps, copy the text from Paste HTML code to embed in website field. Since we want give people driving directions to our Santa Cruz Beach Cleanup, we'll use the HTML code from that search result.
You should be here:
5. Preview the map in the post and make sure it suits your liking, then hit the "Publish Post" button.
Congratulations! You have successfully embedded a map into your blog post.
Now that you're familiar with embedding maps directly into your website or your blog, visitors to your site can visualize your work.
If you created a map using the "Maps" tab, you selected a box titled "Public" or "Unlisted." If you selected "Public," your map is visible to all Google Maps users. You can also find others' maps. Here's how:
1. Open Google Maps and click on the "Maps" tab. Zoom in to an area of your
interest.
2. Look under "Featured Content" and click on "Browse Popular Maps"
Also, if you find a map you like, you can save it to Custom Maps.
Learn more about Google Maps and embedding Maps APIs onto your website using JavaScript.
Have questions about this tutorial? Want to give us some feedback? Visit the Google Earth Outreach Discussion Group to discuss it with others.
Earth Outreach