Google Map Module Documentation

Introduction

Group Package 1 websites contain a mix of default verbiage and imagery, with your group's details. This is managed for you by Scouts Online. There is no ability change the settings.

If you'd like to upgrade to a higher package level, please contact us.

The Google Map module is a flexible tool for displaying a map on your web pages.

Each map can have one or multiple pin pointer. Each pin can have a different icon and show location information and a website link. The style of the map can also be changed.

Use Cases

The following panels show specific tasks. Click on a panel to see the procedures.

Setup a Basic Map

Set the fields required to show a Google Map on your web pages.

Set the fields required to show a Google Map on your web pages.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Select a Map Type
Enter details for one or multiple Pointers:
- Enter a Name for the location
- Enter a Description for the location
- Enter the Latitude and Longitude of the location. To find these, see the Find Location tech-tip
- OR, enter a Post Code. When the Google Map is saved, it will be replaced with estimated Latitude and Longitude figures
- If you want to show a website link for the location, add it in the Link URL field
- You may specify a Pin URL to show a different image. See here for options.
Set the Animation Fields as required
Click to keep your changes or to abandon your changes

NB. If you make a mistake, you may reverse the change in the Admin/Admin Audit Trail

Fig. 1: Settings Fields

Change the Map Type

There are different map themes to choose from.

There are different map themes to choose from.

To change the Map Type, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Select a different Map Type
Click to keep your changes or to abandon your changes
Edit again to try out other Map Types

Fig. 1: Map Type options

Map Types

Roadmap

Satellite

Satellite + Roads

Roadmap + Terrain

Set the Height & Width

To focus your map area on a closer area, set the height and width of the map.

Focus your map area on a closer area, set the height and width of the map.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Set the Height of your map. This is the number of pixels suffixed with "px". E.g. 400px in Fig. 1
Set the Width as a percentage of the area of the screen the Google Map module is placed. This is usually best left as 100%.
Click to keep your changes or to abandon your changes

Fig. 1: Height and Width fields

Join the Dots

If you have multiple map pointers on a Google Map, you can join these together with a line.

If you have multiple map pointers on a Google Map, you can join these together with a line.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Tick the Join Dots field
Click to keep your changes or to abandon your changes

NB. If you make a mistake, you may reverse the change in the Admin/Admin Audit Trail

Fig. 1: Join Dots field ticked

Fig. 2: Join Dots for a Hike Route

Show the Website Visitor's Location

If you intend your map to be used from mobile devices, maybe on a hike, you can show the location of the person viewing the map.

If you intend your map to be used from mobile devices, maybe on a hike, you can show the location of the person viewing the map.

NB. This is dependent on the website visitor allowing this feature on their device and browser.

It should also be noted, that the position may be incorrect from a device using a home/work broadband connection. It works best from a mobile devices while out-and-about.

To add the website visitor's location to a google map, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Tick the Show My Location field
Click to keep your changes or to abandon your changes

Fig. 1: Show My Location field ticked

Fig. 2: Map with the website visitor's location shown

Change Pin Icons

Instead of using the standard Scouting map pointer, each pointer on a Google Map can be personalised.

Instead of using the standard Scouting map pointer, each pointer on a Google Map can be personalised.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Set the Pin URL using one of the alternatives shown in Fig. 1, or using one of your own uploaded in the Admin/File Manager
Leave it blank to show the default Scouting pin
Click to keep your changes or to abandon your changes

~/Images/SA_Site_Images/MapIcons/CampsiteIconPin.png

~/Images/SA_Site_Images/MapIcons/2018FleurDeLis_006ddf.png

~/Images/SA_Site_Images/MapIcons/2018FleurDeLis_ed3f23.png

~/Images/SA_Site_Images/MapIcons/2018FleurDeLis_25b755.png

~/Images/SA_Site_Images/MapIcons/2018FleurDeLis_000000.png

~/Images/SA_Site_Images/MapIcons/2018FleurDeLis_00b8a3.png

Fig. 1: Pin Options

Fig. 2: Pin URL field

Plot a Hike Route

If you're planning a hike, why not create a web page for it, with a map, route card table and details for parents.

The Google Map could be used to visualise details of a hike or expedition.

To do this, follow these steps:

Click the settings below the module and override the default settings (see here) or add a module to your own pages, using the Page Designer
Select a Map Type - Maybe Roadmap + Terrain
Add your route Pointers:
- Enter a location Name
- Enter a Description of the location
- Enter the Latitude and Longitude figures. To find these, see the Find Location tech-tip
- You may specify a Pin URL to show a different image. See here for options.
Click to keep your changes or to abandon your changes
You could also a add a Table module to your page and show the roue card

Fig. 1: Hike Route

Fig. 2: Hike field settings

Scouts Online Facebook Page

Scouts Online YouTube Channel

Google Map Module Documentation

Introduction

Map Types

Roadmap

Satellite

Satellite + Roads

Roadmap + Terrain

Follow Us

Scouts Online