WiscWeb CMS - Google Map with Pins Content Class

This document explains how to use the Google Map with Pins content class. It allows you to create a map of landmarks and show them on a map. It is useful if your department or organization has a variety workplaces, projects, or other interesting locations that are significant for your customers to know about.

Acquiring a Google Maps API v3 Key

Before you can use the Google Maps with Pins content class, you will want to get a Google Maps API v3 key. This key allows you to monitor your website's use of the Google Map feature. It is tied to your Google account, just like Google Analytics and Google Translate.

Follow this link to obtain your Google API Key: https://developers.google.com/maps/documentation/javascript/tutorial.

Once you have the key, keep it handy so that you can enter it at the appropriate time when you follow the directions below.

Setting up Google Maps with Pins

  1. Navigate to the page in SmartEdit to which you want to add a map.

  2. Click on Open Page.

    open page icon

  3. Click on Manage Center Blocks.

    manage center blocks icon

  4. Click on Create and Connect Page

    create and connect page icon

  5. On the next screen, choose Google Map with Pins.

    clicking on google map with pins

  6. When the screen refreshes, you will see the content class added. Click on Edit Configuration.


  7. In the Edit Configuration Menu, you will be presented with the following options:

    • Map Title: The Map Title will appear above the map. Leave this field blank if you do not want a title to appear.

    • Show Pin List: This will create a pin list with links below the map.

    • Map Zoom Level: This feature will set the default zoom level for your map. Higher numbers zoom in closer.

    • Google Maps API v3 Key:This is where you enter the Google Maps API v3 Key that you got at the beginning of this document.

    • Center of Map Latitude: This centers the map on the latitude entered. The default is the center of the university.

    • Map Center Longitude: This centers the map on the longitude entered. The default is the center of the university.

    • Map Height: This sets the map height on the webpage.

    • Map Width: This sets the map width on the webpage.

  8. Your map should not be setup, and you'll want to start adding pins. The instructions below will walk you through adding pins. You can view these instructions separately at WiscWeb CMS - Adding Pins using the Google Map with Pins Content Class

Adding Pins

  1. Using SmartEdit, navigate to your Google Map with Pins.

  2. Open the Google Map with Pins, and click on Manage Pins.

    where to click manage pins

  3. Click on Create and Connect Page

    create and connect page icon

  4. Enter a name for your pin and click OK. This name will appear below the Google Map.

  5. The page will refresh, and your new pin will appear below the map under Current Pins. You can rename Current Pins by clicking on the red dot next to it.

  6. Click on the pin you created.

  7. A pin menu will appear.

    options in the pin menu

  8. Click on the red dot above Name to open the options. Red dots will appear next to most options, as seen in the above screenshot.

  9. The following items can be edited for each pin by clicking on the red dot next to it:

    • Name: Allows you to enter the name of the location. Also allows you to change the pin color, text, and whether or not the read more link appears in the pin bubble. The other options are set in other locations can be ignored.

      options in the name menu

    • Description: Allows you to add more detail when a user clicks on the pin. Information that is useful includes, address, contact information, etc.

    • Coordinates: Allows you to set the coordinates of a building by latitude and longitude. More instructions for using this feature are in the next step.

    • Read More link text: Allows you to put a link when the user clicks on the pin and appears in addition to the description. The text entered will appear as a hyperlink and the link will be set in the next two fields detailed below.

    • Read More link type: Allows you to choose an external link or a CMS page for an internal link.

    • CMS Page/External Link: Depending on what you chose above, you will either put in an external link or a CMS page to link to.

  10. Use the directions below for entering coordinates:

    • On-campus location: Many locations and buildings are pre-loaded into the CMS. When you click on the coordinates menu, there is a drop-down menu just below the map. Select the location or building and the coordinates will automatically populate. If your location is not listed, go to the next step of manually inputting your coordinates.

      location of pre-loaded locations

    • Off-campus OR unlisted On-campus location: You can manually enter a location using the corresponding latitude and longitude for the location. This can be difficult to obtain, but there are free tools online that can help you find the coordinates. We recommend http://stevemorse.org/jcal/latlon.php. Note: You need to use the decimal coordinates.

Keywords:latitude longitude campus locations buildings   Doc ID:37198
Owner:Matthew G.Group:WiscWeb CMS
Created:2014-01-30 15:59 CDTUpdated:2015-08-12 12:57 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0