How to Integrate Google User Maps Into Drupal

Integrating a Google Map in Drupal is a matter of embedding HTML code.

Google goes out of its way to make sure you can embed its maps in your web site, so it's no surprise that the task is fairly easy in Drupal. The popular content management application gives you plenty of ways to integrate imported HTML code, so you can place a Google user map in an article, a page, a panel, or a block -- whichever makes the most sense for your own Drupal design.

Instructions

1. Create a custom view in Google Maps by entering a term in the search field and pressing "Enter." Position the map with the navigation controls; use the Zoom tool to determine the scale of the map.

2. Click on the link icon above the map, then click on "Customize and preview embedded map." Set the final view size to "Small," "Medium" or "Large" by clicking the radio button next to these options, or enter a custom size in the Width and Height fields.

3. Select all of the HTML code in the box below the map preview, and press "Control" and "C" to copy it.

4. Log into your Drupal site as Administrator. Click on "Structure," then "Blocks," then "Add Block." Click in the "Block Body" box and hit "Control" and "V" to paste your text.

5. Enter a description of your map block in the "Block Description" field. Enter a display title for the block in the "Block Title" field if you wish. Drop down the "Text Format" field and select "Full HTML." Under "Region Settings," select the region in which you'd like your map to appear. Click "Save Block" at the bottom of the page.

6. Click on the Home icon at the upper left of the administration tool bar to preview your home page. Your Google Map will appear in the region to which it was assigned.

Tips & Warnings

• You can directly edit the HTML code once you've pasted it into your block definition, allowing you to add custom borders, colors, etc.

• You can have your map appear only on certain pages of your Drupal site, or only for certain types of users, by changing the menu settings at the bottom of the "Blocks" page.

• The Google Map code can also be added to a new page, or to a content frame.

• Setting map dimensions bigger than the region you assign your map block to can disrupt the look of your Drupal site. Before you set the custom display settings in Google Maps, make sure you know the maximum dimensions for content in the Drupal page region you have in mind.

References

• Google Maps Help: Embedding a Map into a Website or Blog
• Drupal Documentation: Working with Blocks (content in regions)
• Drupal Documentation: Block HowTos

Resources

• Google: Google Maps API Family