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.

To use the map component, you will need to enable maps in the Footer.

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: Select "Static"
• ADD a single or multiple location:
  • Latitude: Enter the Latitude coordinate
  • Longitude: Enter the Longitude Coordinate
  • Pin Label: Enter the text that will display when users click on a location on a map.
  • Pin Color: Select what color you prefer your pin to be
• 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: Enter an error message in the event the map cannot load locations.

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

A dynamic map will dynamically pull in all locations based on content fragments that have been previously authored.  Click here for more information on setting up content fragments.

• Render Map: Set to "dynamic"
• Model: Select the Content Fragment Model titled "Location" from the State of Illinois Content Fragment Directory 
• 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 - 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. (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.