Map

The map component allows authors to place a map on the page with a marker to indicate a single or multiple locations. Map locations are identified using Latitude and Longitude coordinates.

Authors can use the "Static" map option to enter single or multiple destinations on a map on a single page. 

For maps that will need to be included on multiple pages, or across different agency websites, it will be beneficial to set up your map locations as content fragments and author your map using the "Dynamic" option.

Whether you use the dynamic or static map options, you will first need the latitude and longitude for all locations that you want to mark on your map.

• Using Google Maps, search for the location you want to place on your map.
• Right-click on the location
• Log the latitude and longitude for your location.  Be sure to note whether the coordinate is positive or negative (-) which will be required for accurate location.

• Render Map: Select "Static"
• Enable Show Map Button: When checked, the map will display a "Show Map" button overlayed on top of unloaded map tiles. Clicking the button then loads and displays the map tiles.
• Options for Static Map: Add a single or multiple locations:
  • Latitude: Enter the Latitude coordinate.
  • Longitude: Enter the Longitude Coordinate.
  • Pin Label: Enter text into the RTE field that is to be displayed when a user clicks the Pin for the location on the map.
  • Pin Color: Select what color you prefer your pin to be on the map.
• Zoom Level: You have the ability to input a zoom level of 1 - 20 where 1 is the most zoomed-out and 20 is the most zoomed-in level. This will affect the default zoom level of the map component, and users will still have the ability to change the zoom level manually. 
• Error Message: Use the RTE text field to enter an error message that will be displayed if the map is unable to load locations.

This example has been set up as a static map with a singular location. 

A dynamic map will dynamically pull in individual locations based on the currently loaded content fragment on the page.  Click here for more information on setting up content fragments.

• Render Map: Set to "Dynamic"
• Enable Show Map Button: When checked, the map will display a "Show Map" button overlayed on top of unloaded map tiles. Clicking the button then loads and displays the map tiles.
• Model: Select a custom Content Fragment Model that has fields for Latitude, Longitude, and Pin Labels. Users may also use the Global model "Location" that has these fields included. 
• Parent Path: Select the folder where you have authored your map locations as content fragments
• Latitude: Select the field in your content fragment which contains the Latitude.  In the State of Illinois content model called "Location", that will be simply labeled "Latitude"
• Longitude: Select the field in your content fragment which contains the Longitude.  In the State of Illinois content model called "Location", that will be simply labeled "Longitude"
• Pin Label: Select the field in your content fragment which contains the Pin Label.  In the State of Illinois content model called "Location", that will be simply labeled "Pin Label"
• Pin Color: Select the color you want pins to display on your map.
• Zoom Level: You have the ability to input a zoom level of 1 - 18 where 1 is the most zoomed-out and 18 is the most zoomed-in level. This will affect the default zoom level of the map component, and users will still have the ability to change the zoom level manually. (see examples above)
• Error Message: Indicate an error message you would like to display in the event that the map cannot display locations. 

This example has been set up as a dynamic map that points to a folder that contains multiple location content fragments. The map will dynamically load a location based on the current content fragment loaded:

• The Chrysler Building
• The Empire State Building
• The Statue of Liberty