WiscWeb - Create and Embed a Google Map

This document will walk you through the process of creating a Custom Google Map, and then embedding that map to your WordPress site.

Important

Create a Google Map for an individual place

To begin, go to http://maps.google.com.

  1. Zoom your map into the location you would like to define your pin point and click.
    • You can use a predetermined location or click to create your own pin.


      Create a pin location for your map

    • If you click on a predetermined value, a menu of options will appear on the left. If you click to create your own pin a popup will appear at the bottom of your screen. You can click on that to bring up a similar menu.

      Google Map showing address on Orchard St in Madison

      Computer Sciences Google map location

  2. To share this specific map, click on the Share icon.
  3. A new popup window will appear. Click on Embed a map at the top, and then click on Copy HTML to the right. This will be the code you need to embed this map on your page.

    Embed code options from Google Maps


Create a Google Map for a group of locations

To begin, go to http://maps.google.com.

  1. Click on the menu in the upper left of your screen.

    hamburger menu for google maps

  2. Click on Your places in the menu that appears.

    Access your Google Maps by clicking on Your places

  3. Click on Maps

    Your maps are located in the Maps section

  4. Click on your saved Map.

    Access any saved maps you have created

  5. Click on Open in My Maps. A new window will appear.

    To view or edit the map, click on this menu option

  6. In the new window, click the Share button to make sure that this map is public and enable link sharing.

    Enable sharing options

  7. To embed this map, click the three vertical dots next to the name of your map, and choose Embed on my site

    Access the HTML code needed to embed the map

  8. Copy the code, and follow the steps from above to embed a map in your WiscWeb site.

Embedding the map in WiscWeb

Once you have copied the map's HTML code, you can place this on a page through two different options.

Text Block

  1. On the page that you want to embed this code into, click in the Text Block and paste the HTML that you had copied from Google Maps.
    • You will notice that the <iframe> tags are automatically removed and only the HTML of the map itself remains - this is due to the plugin that we are using to allow this functionality.
    • After a short time, the Google Map itself will embed into the Text Block.

      Google Map embedded in Text Block

  2. Publish the page and check to see that it looks like what you expected.

    Google Map embedded on page

Embed Content Page Element

  1. On the page that you want to embed the Google Map on, click on Add Page Element and choose Embed Content.

    Embed Content page element selection

  2. In the URL field, again paste in the HTML code that you had copied. The map will automatically appear.

    HTML code pasted into the Embed Content page element

  3. Publish the page, and check to see how it looks on page.


Keywords:
map google custom location pin place site sites embed 
Doc ID:
100810
Owned by:
Matt G. in WiscWeb
Created:
2020-04-17
Updated:
2024-07-30
Sites:
DoIT Help Desk, WiscWeb