Overview
This article will guide you through setting up and adding a Google Maps to your website. This widget uses the Google Maps Embed API and before you start using this, you will need a project with a billing account and the Maps Embed API enabled. To learn more, see Set up in Cloud Console.
For more information on widgets see: Widgets: What are they, and how to use them
Adding the Widget
To get started, select the widget tab of a theme page or navigate to the widget section of any other page type and select "Add Widget." You will then be brought the widget selection overlay where you will find the "Photo Gallery" widget. Simply click add to apply the widget to the page.
Widget Settings
Click edit on the widget and you will find the following settings:
| Setting | Description |
|---|---|
| Destination | (Required) Defines the end point of the directions. URL-escaped place name, address, plus code, latitude/longitude coordinates, or place ID. The Maps Embed API supports both + and %20 when escaping spaces. For example, convert "City Hall, New York, NY" to City+Hall,New+York,NY, or plus codes "849VCWC8+R9" to 849VCWC8%2BR9. |
| Features to Avoid | Specifies features to avoid in directions. Note that this doesn't preclude routes that include the restricted feature(s); it biases the result to more favorable routes. tolls, ferries and/or highways. Separate multiple values with the pipe character (e.g. avoid=tolls|highways). |
| Heading | (Required) Indicates the compass heading of the camera in degrees clockwise from North. Value in degrees from -180° to 360° |
| Height | (Required) Indicates the compass heading of the camera in degrees clockwise from North. Value in degrees from -180° to 360° |
| Location | (Required) accepts a latitude and a longitude as comma-separated values (46.414382,10.013988). The Google Maps API will display the panorama photographed closest to this location. Because Street View imagery is periodically refreshed, and photographs may be taken from slightly different positions each time, it's possible that your location may snap to a different panorama when imagery is updated. |
| Map Mode |
You can specify one of the following map modes:
|
| Map Type | Defines type of map tiles to load. |
| Map View Center | (Required) Defines center of the map view. Accepts comma-separated latitude and longitude value; for example: 37.4218,-122.0840. |
| Marker Location | (Required) Defines map marker location. URL-escaped place name, address, plus code, or place ID. Google Maps Embed API supports both + and %20 when escaping spaces. For example, convert "City Hall, New York, NY" to City+Hall,New+York,NY, or plus codes "849VCWC8+R9" to 849VCWC8%2BR9. |
| Method of Travel |
Defines the method of travel. If no mode is specified the Maps Embed API will show one or more of the most relevant modes for the specified route.
driving, walking (which prefers pedestrian paths and sidewalks, where available), bicycling (which routes via bike paths and preferred streets where available), transit, or flying. |
| Origin | (Required) Defines the starting point from which to display directions. URL-escaped place name, address, plus code, latitude/longitude coordinates, or place id. The Google Maps Embed API supports both + and %20 when escaping spaces. For example, convert "City Hall, New York, NY" to City+Hall,New+York,NY, or plus codes "849VCWC8+R9" to 849VCWC8%2BR9. |
| Unit of Measurement | Specifies measurement method, metric or imperial, when displaying distances in the results. If units are not specified, the origin country of the query determines the units to use. |
| Way Points | (Optional) Specifies one or more intermediary places to route directions between the origin and destination. Place name, address, or place ID. Multiple waypoints can be specified by using the pipe character (|) to separate places (e.g. Berlin,Germany|Paris,France). You can specify up to 20 waypoints. |
| Width | (Required) Controls the maps width. |
| Zoom | (Required) Sets initial zoom level of the map. Values ranging from 0 (the whole world) to 21 (individual buildings). The upper limit can vary depending on the map data available at the selected location. |