Getting Started on Sites: How to Add a Google Map to Your Website

Welcome back! This is the sixth blog post in a series on how to create a Drupal 7 personal website using Stanford Sites. Last time we enabled the image insert button to insert an image on your webpage. In this post, we'll walk through the steps to add a Google map to your site.

Many websites have a "Contact" or "Directions" page that requires a map. You can use Google Maps to create a customized map and embed it on your webpage. In this blog post I will use the Article content type as an example. You may choose to manipulate another content type that already exists or one that you've created for your site.

Creating a Google Map

1. Log into your Google account.
2. Navigate to Google Maps.
3. Enter the location in the search bar and press enter/return on your keyboard.

Embedding a Google Map

1. In the upper left corner of the browser winder, click the link button.
   

   

2. You have a few options from which to choose.
   
   

   

   Use the first URL code to grab only a link to the Google map. Use the second code if you want to embed the map into your webpage.

3. For more options, click the Customize and preview embedded map link. You can customize the map size; see a preview of the map; and copy the HTML code to paste in your website.
4. Go the the webpage where you want to embed a Google Map.
5. Click the Edit tab.
6. Be sure the Text format is set to Full HTML. In the Body field paste the embed code.

Like so:

View Larger Map