Google Maps Widget

Installation and Activation

Make sure you have installed the SiteOrigin Widgets Bundle and that the Google Maps Widget is activated in the the Widgets Bundle interface under PluginsSiteOrigin Widgets. For more information see our Getting Started guide.

Adding a Map to a Page or Post

Navigate to the page or post on which you wish to display a google map, click the desired row and cell and click Add Widget to open the Add New Widget dialogue.

MW5

Use the Add Widget dialog to search for the SiteOrigin Maps widget.

Click on the SiteOrigin Google Map widget to insert it into into the chosen row and cell. Hover over the widget to display further options namely Edit, Duplicate and Delete.

MW6

Hover over the Maps widget to edit, duplicate or delete it.

Editing a Map

To edit a map, hover over the widget and click on the Edit link. The SiteOrigin Google Map edit dialogue will appear. Here you will find the standard Widget Styles settings as well as specific SiteOrigin Google Map Settings.

The specific SiteOrigin Google Map settings are covered below.

siteorigin-google-maps-settings-overview

SiteOrigin Google Maps widget settings overview.

Map Center

This is where you specify the name of a place, town, city, or even a country. It can also be an exact address.

MW8

Define a map center.

Once you have specified the location the map will be displayed with its default settings as shown below:

MW9

The map center displayed with a maker.

API Key

A Google Maps API key is now required for your maps widget to function correctly. For a step-by-step guide on getting an API key, please, see: Get a Key/Authentication.

(A key shouldn’t be required for maps work on localhost but is required for live sites).

Google Maps API key (required).

Google Maps API key (required).

 

Settings

Under settings is where you set the map display options:

Map Type

There are two map types to select from; Interactive (default) and Static Image, each with its own specific settings.

MW10

Choose between an interactive or a static map.

Interactive Map

The interactive map settings include the following:

  • Height: Defined in pixels. The map width is defined by the width of the cell into which the map is inserted.
  • Zoom Level: Specified by a value from 0 to 21, where 0 is the world and 21 is highest zoom.
  • Scroll to zoom: Allow scrolling over the map to zoom in or out.
  • Draggable: Allow dragging the map to move it around.
  • Disable default UI: Hides the default Google Maps controls.
  • Keep map centered: Keeps the map centered when it’s container is resized.
Maps widget settings

Maps widget settings.

Static Image

The static image map settings include Width, Height and Zoom Level as defined above.

MW12

Static map settings.

Markers

Markers are used to define points of interest on the map.

markers

The markers section, used to define points of interest.

Show marker at map center

Clicking on the checkbox displays a marker at the center of the map, based on the information you provided in the Map Center field.

Marker Icon

To replace the default map marker with your own image, click on the “Choose Media” button to select the icon from the media library.

Draggable Markers

This feature allows you to drag all markers around the map.

MW13b

Setting to enable draggable markers.

Marker Positions

To create a new marker click on “Add” under the Marker positions tab. A new marker will appear.

MW13c

Add additional marker positions.

Click on the drop down arrow to specify the marker location or address in the “Place” field.

MW13d

Enter the marker position location.

Continue adding as many markers as are required.

MW13e

Marker positions displayed.

Click and hold on a marker to drag it around when the draggable feature is enabled.

MW13f

Click, hold and drag to change marker positions.

Styles

There are three styling options to choose from; Normal (Default styling), Custom and Raw JSON (JavaScript Object Notation).

MW13g

Choose your map styling.

Styles: Custom

Click on the Custom map style radio button to reveal additional custom styling options.

MW13

The custom map styling interface.

Styled Map Name

Here is where you title your custom map settings. The title will  appear in the top right corner of the map.

MW14

Custom map title.

Custom Map Styles

Here is where you can style various features of the map. To add a new feature click on the “Add” button under Custom Map Styles. Click on the drop down arrow of that style to begin editing. Continue adding as many features as you wish to edit.

MW15

Styling the individual map elements.

  • Select map feature to style

To select which map feature you would like to style click on the drop down menu. The list includes the following features (default feature is Water):

MW16

Select the map feature to style.

In this example I will style the default feature, Water.

  • Select element type to style

When styling a feature you can choose to style the features Geometry, Label or both. Click on the drop down menu to select which element you wish to style.

MW17

Select the element type to style.

  • Visible

The visible setting allows you to turn the visibility of a feature element on or off by clicking on the checkbox.

MW19

Toggle feature visibility.

The example below has the following settings: Map feature: Water, Element type: Geometry, Visibility: off

MW18

Map feature: Water, Element type: Geometry, Visibility: off

  • Color

Change the color of the feature element by clicking on the “Select Color” button. Select the desired color using the color pallet or type in the color Hex (#) Value. Adjust the color intensity using the slider.

MW20

Change the color of a feature element.

The example below has the following settings: Map feature: Water, Element type: Geometry, Color: #81d742

MW21

Map feature: Water, Element type: Geometry, Color: #81d742

Styles: Raw JSON (JavaScript Object Notation)

Clicking on the Raw JSON radio button will reveal two additional options; Styled Map Name as explained above and the Raw JSON Styles editing window.

Here you can copy and paste predefined styles from Snazzy Maps. In the example below I used the Blue Essence styling from Snazzy Maps. Some of the styles do not work correctly with the Static Image Map Type.

MW23

Raw JSON: Blue Essence styling from Snazzy Maps

 

Directions

The directions settings are used to display a route on your map, with waypoints between your starting point and destination.

MW24

Directions settings.

Starting Point and Destination

Begin by specifying the starting point and destination in the fields provided.

Mode of Travel, Avoid Highways and Avoid Tolls

Select the expected mode of travel using the drop down menu. Options available include Driving, Walking, Bicycling and Transit.

MW25

Specify the expected travel mode.

Select whether to avoid highways and tolls by clicking on the check box next to each. Based on the mode of travel you select and what routes to avoid, different travel routes will be selected.

MW26

Select whether to avoid highways and toll roads.

Waypoints

A waypoint is any location that you wish to be included in the travel route. A waypoint could be a point of interest or a stop over. Add a waypoint by clicking on the “Add” button under waypoints. Begin editing a waypoint by clicking on the dropdown arrow in the far right corner of that particular waypoint.

MW28

Waypoints settings.

  • Location

Specify a waypoint location by typing the address in the location field provided. Waypoints will be indicated by a white  dot on the map.

MW27

Waypoints are indicated by a white dot.

  • Stopover

If the waypoint you wish to specify is a stopover, click on the stopover checkbox. The waypoint will now be displayed as a green marker.

MW29

Select an option stopover.

The Starting Point, Stopover waypoints and Destination will all display in alphabetical order. Click on any of the markers to display its address.

MW30

Click on any of the markers to display the address.

Optimize Waypoints

Clicking on the optimize waypoints checkbox allows the Google Maps service to reorder waypoints for the shortest travelling distance.