How to Make Google Maps Appear in Drupal

Google automatically generates the code you need to embed a map in a Drupal site.

Interfacing Google Maps with Drupal, the popular content management system, is fairly straightforward. Google automatically creates the HTML code you need embed one of its maps, and Drupal offers countless ways to use this code in your website. The most common of these is in the creation of an article, but the same basic technique can be used on stand-alone pages, panes or user-defined content modules.

Instructions

1. Go to Google.com and click the "Maps" link in the upper left of the screen.

2. Enter the search term for the map you wish to embed and click the magnifying glass icon. Use the navigation controls in the map to adjust the position of the map and the zoom level.

3. Click on the link icon to the upper left of the map. Copy the code that appears in the field under "Paste HTML to embed in website."

4. Log in to your Drupal page as administrator and click on the "Add content" link at the top.

5. Click on "Article" in the Add Content menu.

6. Enter a title for your map in the "Title" field of the Create Article page. Add any tags, separated by commas, that will help people find your map in the "Tags" field.

7. Click in the "Body" window and paste the Google Map HTML code by pressing "Ctrl+V." In the drop-down menu labeled "Text Format," select the "Full HTML" option.

8. Click the "Save" button at the bottom of the Create Article page. Your map will now appear on the homepage of your Drupal site.

Tips & Warnings

• Before you copy the HTML code from the Google Maps site, you can modify the size and features of your map by clicking on the "Customize and preview embedded map" link.

• You can give your map a permanent place on your homepage by clicking on "Structure" in the Drupal administration menu, then selecting "Blocks" and "Add Block." Paste the Google Maps code into the block body just as you would in an article body, save the block and assign it to the region of your page where you'd like it to appear.

• If you've installed a WYSIWYG editor module in Drupal, you need to toggle it to "Source" before pasting the code. Otherwise the code will simply display as text on your page.

• Using the "Filtered HTML" rather than the "Full HTML" text option in Drupal may disable some of the features in your Google Map.

References

• Google Maps Help: Embedding a Map into a Website or Blog
• Drupal Documentation: Creating Content
• Drupal Documentation: Blocks - Adding Extra Information

Resources

• Drupal Download & Extend: CKEditor - WYSIWYG HTML editor