WiscWeb - WordPress UW Theme - Create and Embed A Google Map

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

Create A Google Map

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.

  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

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, create, places, site   Doc ID:100810
Owner:Matthew G.Group:WiscWeb CMS
Created:2020-04-17 13:23 CSTUpdated:2020-04-20 13:29 CST
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0