Adding a Google Map to Your Website

You can add a screenshot or image of a map to your website, however adding an interactive Google Map will allow users to move around the map and zoom in and out. This article will walk you through how to add an interactive Google Map to a page on your website.

Generate the Google Map Embed Code

Google Maps features a great tool for generating and customizing embed code. Embed code is generally a small snippet of code that can be pasted into a page on your site to link to interactive content from an external site. To get started, navigate to maps.google.com and search for an address. After successfully locating the address or area you would like featured on the map, find the embed button, which is located under the dropdown menu, which is on the left hand side of the search bar.

Image: Finding the Embed Code Button

Clicking the embed code button will open a window with a short URL, iframe embed code and the option to customize the embed code.

The short URL, which appears in the first text box, is simply the code which would be used as a hyperlink. You can use this code to create a text-based link such as -> Click here to view a map. The second text field labelled "Embedded Map" is the embed code we're interested in.

You can click change the map size, or simply copy the code the code from the text field. Note that you can only set the size of your embedded map by customizing it on Google, not through the Synergy 8 editor.

Image: Copying the embed code


Embedding the Google Map

Follow these steps to place Google Map embed code on a page of your website:

  1. Navigate to the Pages screen in the dashboard and locate the page where the map will be embedded, click the page to open the page editor.
  2. Place your cursor at the location where the map will be embedded.
  3. Click the <> Insert Embed code button (pictured below) located in the "Insert" section of the editor toolbar.
  4. Paste the embed code into the popup window and press the "OK" button.