Map

Use this guide to add and edit a map.

Features

The component:

• can create an interactive Google map centred on a specific location
• can create an interactive Google map with directions from an origin to a destination
• uses street addresses or GPS coordinates
• sets the size of the map in pixels
• can be used on the homepage, content page, news articles, events, the contact page and inside the column control on these pages.

Before you start

Navigate to the page where you want to add a map component and you are ready to begin. 

Step 1: Add map component

• Select Drag components here.
• Select the plus icon.

• Select Map from the Insert New Component list.

Step 2: Edit the map component

• Select the Map component.
• Select the spanner icon to add your map to the page. This is the Configure button. 

Step 3: Place your map on the page

Option 1: Place map that displays a location

• In the Mode field, select Place from the drop-down.
• Enter the Address you would like to display. You can also enter GPS coordinates.
• The Height field defaults to 400px. 
• The Width field defaults to blank. This automatically displays at 100% wide which means the map stretches to the width of the page.
• Select the tick on the top right of the pop-up to save the map settings. 

Completed map component - place

Example of a map showing a place on a web page: 

Option 2: Map that displays an origin and destination

• In the Mode field, select Direction from the drop-down.

• Enter the Origin Address you would like to display. You can also enter GPS coordinates.
• Enter the Destination Address you would like to display. You can also enter GPS coordinates.
• The Height field defaults to 400px. 
• The Width field defaults to blank. This automatically displays at 100% wide which means the map stretches to the width of the page.
• Select the tick on the top right of the pop-up to save the map settings. 

Completed map component - destination

Example of a map showing an origin and destination on a web page: 

Publish your changes

• For changes to be updated on your live school website you will need to publish the page. 

 You may also find useful:

• Get coordinates from Google Maps