Drupal: Add a Google Map in an iFrame

Applies to Drupal Enterprise and Drupal Lite.

However, the Google Maps custom block should be used instead. See Drupal Lite: Add a Google Map Block to a Page.

An iFrame can be used to embed a Google Map in your site. First you must get the URL to the Google map you wish to embed, then you will add the iFrame block to your page.

    Get the Google Map URL

    1. Go to Google Maps and enter the location for the map you wish to embed.
    2. Select the menu button in the top left.
      Google Maps menu highlighted in the upper left
    3. Select Share or embed map. The Share window is displayed.
    4. Select the Embed a map tab.
    5. Select the Copy HTML button. The entire HTML embed code is copied.
      Note: The custom iFrame block in Drupal only uses the URL. If the full HTML embed code is entered, error messages will be displayed.
    6. Paste the HTML embed code into a document so you can remove the leading <iframe src=" and the trailing " width= ... >. See example below.
    7. After removing the parts of the HTML embed code you do not need, you can paste the Google Map URL into your iFrame block.

    Example HTML Embed Code

    This is an example of the HTML embed code you will get from Google Maps. The part that you need for the iFrame is highlighted in bold text. Everything else can be deleted.

    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d462.3334232441084!2d-93.2353000568961!3d44.97288925884003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1598640368756!5m2!1sen!2sus" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

    The resulting URL will look like this:

    https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d462.3334232441084!2d-93.2353000568961!3d44.97288925884003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1598640368756!5m2!1sen!2sus

    Add a custom iFrame block to the page layout

    1. Navigate to the page.
    2. Select the Layout button below the page title.
      • If you don't see the Layout button, make sure you are logged in and have editing rights to the page.
    3. Select + Add Block in the region that will have the iFrame. The Choose a block palette is displayed.
    4. Select Create Custom Block at the top of the palette. The Add a new custom block palette is displayed. 
    5. Select iFrame. The Configure Block palette is displayed.
      1. Enter a Title for the block
        • Use the checkbox to display/hide the block title
      2. Enter the iFrame URL (see steps above to get the Google map URL)
      3. Enter an iFrame Title (optional)
      4. Enter an iFrame Width. Leave blank to have the iFrame fit the width of the region.
      5. Enter an iFrame Height. Leave blank to have the iFrame fit the height of the region.
    6. Select Update.

    Last modified

    TDX ID

    5626