WiscWeb - Create and Embed a Google Map

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

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

---

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.
   
   
   
   
2. Click on Your places in the menu that appears.
   
   
   
   
3. Click on Maps
   
   
   
   
4. Click on your saved Map.
   
   
   
   
5. Click on Open in My Maps. A new window will appear.
   
   
   
   
6. In the new window, click the Share button to make sure that this map is public and enable link sharing.
   
   
   
   
7. To embed this map, click the three vertical dots next to the name of your map, and choose Embed on my site
   
   
   
   
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.
     
     
     
     
2. Publish the page and check to see that it looks like what you expected.
   
   

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.
   
   
   
   
2. In the URL field, again paste in the HTML code that you had copied. The map will automatically appear.
   
   
   
   
3. Publish the page, and check to see how it looks on page.

See Also:

• WiscWeb - Embed Options