Skip to content Skip to navigation

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.

    link button

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

    past or embed link

    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

Comments

Thanks for the post, Cynthia! I'm running into an issue. The URL is being truncated in my page view, and (i think) causing the embed code to break.

https://sites.stanford.edu/stanfordvideo/directions

The embed code is NOT truncated in the body edit area and the text is set to 'full html'. Any thoughts? Thanks!

Hi Cameron,

Click Disable rich-text before pasting the embed code into the body. The link works properly so that's good news.

Thanks for your question!
Cynthia

Thank you!

Aha! Rich-text editor was checked (turned on) and stripping html info.
cb

Nice straight forward instructions. I posted a nice trick on how to get rid of the info bubble on the other day (http://goodwebsites.co.nz/how-to-remove-info-bubble-for-embedded-google-...). Might be helpful.

Thank you very much, this was so easy to follow.You saved me so much time.

Thank you...but the my location is not viewed in google map. so, what to do?

I am not using the Classic Google maps it is the new one .. I have already created a map and clicked the file button and clicked on the "Embed link in Website".. I Clipped and pasted the link but can not get it to work on my website..it just shows the shortened link language on my site... There is no Rich Text on the new Google maps so that is not it.

I have created the map, sized it and embedded it but I am having an issue with the directions. Is there a way to all directions to and from each of my locations.

Great job Cynthia. Unfortunately right after this Google updated the Google Maps layout. I have a post here that covers how to do it for the new Google Maps update: https://inboundboulder.com/blog/how-to-add-a-google-map-to-your-website