UW Theme Classic - 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
- Note: The app listed below are not “core apps” under UW-Madison’s Google Privacy Policy or Terms of Service.
- Support: Support is not available from the UW-Madison Google team for non-core apps. We recommend the following for assistance:
- Review Google documentation.
- Consideration: While service accounts can be used for non-core apps, consider that these have a 0GB quota in My Drive.
Also, this document outlines steps related to UW Theme Classic. This theme will be decommissioned in WiscWeb at the end of December 2026. At that time, this documentation will go away. If you are looking for how to do this process in the new theme, please visit the UW Theme 2.0 website.
- Create a Google Map for an individual place
- Create a Google Map for a group of locations
- Embedding the map on your site
Create a Google Map for an individual place
To begin, go to http://maps.google.com.
- 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.
- 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.
- You can use a predetermined location or click to create your own pin.
- To share this specific map, click on the Share icon.
- 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.
Create a Google Map for a group of locations
To begin, go to http://maps.google.com.
- Click on the menu in the upper left of your screen.
- Click on Your places in the menu that appears.
- Click on Maps
- Click on your saved Map.
- Click on Open in My Maps. A new window will appear.
- In the new window, click the Share button to make sure that this map is public and enable link sharing.
- To embed this map, click the three vertical dots next to the name of your map, and choose Embed on my site
- 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
- 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.
- Publish the page and check to see that it looks like what you expected.
Embed Content Page Element
- On the page that you want to embed the Google Map on, click on Add Page Element and choose Embed Content.
- In the URL field, again paste in the HTML code that you had copied. The map will automatically appear.
- Publish the page, and check to see how it looks on page.