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
- 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.
- 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.