Download Google Earth

Embedding Maps into a Website

 

In the "Creating Maps using the MyMaps Tab" tutorial, we showed you some possible uses of maps for your organisation. 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 the "My Maps" tab, a map of a local search or maps created by other users into your website.

 

Getting Started

You'll probably want to embed the map directly onto your own site. For the purposes of this tutorial, we'll be using both Google Page Creator and Blogger to demonstrate how to embed your map into a website and a blog post. If you'd like to edit your own site directly, all the instructions you need to complete this are in the first part of this tutorial. 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 Google Page Creator and 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 the "My Maps" tab. 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 that we created in the "Creating Maps using the My Maps tab" 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 Customise 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 web page editing application and locate the best place for the map within your website. (See below for examples using Google Page Creator and 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!

My maps

 

Using Google Page Creator

1. Go to Google Page Creator and log in with your Google Account if you haven't already logged in.

2. Click "Create a new page..."

3. Enter a title for your page and hit "Create and Edit."

My maps

4. Click the area where you want the map to appear and open "Edit HTML" in the lower right-hand corner.

My maps

5. Take the text that you copied from the Paste HTML to embed in website field and paste it into the window.

6. Hit Update. Note that you may only see the map if you view the "Preview" or the "Published" page.
Your finished page should look something like this, though your template may look different:

My maps

That's all there is to it! You've now got the tools to share your map with the world, right on your domain.

 

Using Blogger

1. Go to Blogger and open your blog dashboard. If you don't have a blog, creating one is easy! Log in 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 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 to give people driving directions to our Santa Cruz Beach Cleanup, we'll use the HTML code from that search result.

You should be here:

blogger

5. Preview the map in the post and make sure it suits your liking, then hit the "Publish Post" button.

My maps

Congratulations! You have successfully embedded a map into your blog post.

 

Spread the word about your cause

Now that you're familiar with embedding maps directly into your website or your blog, visitors to your site can visualise your work.

If you created a map using the "My 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 the "My Maps" tab. Zoom in to an area of your interest.
2. Look under "Featured Content" and click "Browse Popular Maps"

Also, if you find a map you like, you can save it to My Maps.

Learn more about Google Maps and embedding Maps APIs onto your website using JavaScript.

 

Discussion/Feedback

Have questions about this tutorial? Want to give us some feedback? Visit the Google Earth Outreach Discussion Group to discuss it with others.

 

What's Next?

This tutorial showed you how to embed a map into your website. Next, learn how to enhance your map or your Google Earth placemark with YouTube videos.

You can also learn how to create custom placemarks in Google Earth in this tutorial: