Map
Last updated
Was this helpful?
18.1
Last updated
Was this helpful?
The Map Web Control is used for showing location information on a map image. This Control allows to highlight a specific location or show directions from one point to another.
Expects type text.
Defines a value to the aria-label of the control for accessibility. For more information see .
Expects type list.
An array of places to highlight on the map with visual markers. The format of each marker is:
latitude (required) - a number representing the latitude of the location.
longitude (required) - a number representing the longitude of the location.
Example:
Expects type list.
A list of at least two point objects with a latitude and longitude. If provided and the Show Directions switch is enabled, the map will overlay a path from the first point to the last point in the list. Example:
The resulting control will look like this:
Expects type place.
Expects type place.
A different place object that represents the actual physical center. This differs from the Geocoded center in that if the user moves the map to a location that Google is unable to map, the center and the geocoded center will not be identical. In most cases, they are the same.
If checked, displays the control at the top left of the map to allow the user to switch between different map types.
Displays the starting map type id. If the Map Type Control is available, the user may change between the following map types:
hybrid - satellite map with roads drawn on top.
roadmap - a visual layout of the roads.
satellite - satellite pictures of the map.
terrain - a visual layout of the map with terrain markings for elevation.
Expects type text.
A URL to an image to be used as the marker for the locations provided in the Markers box. Must be a URL to secure address (HTTPS).
Expects type text.
A URL to an image to be used as the marker for the locations provided in the first item in the Direction Markers box. Must be a URL to secure address (HTTPS).
Expects type text.
A URL to an image to be used as the marker for the locations provided in the last item in the Direction Markers box. Must be a URL to secure address (HTTPS).
If checked, a route between the Direction Markers will be highlighted.
Expects type place.
A Place object representing the current location of the user.
Expects type text.
Image to be displayed at the current location marker. It must be a fully qualified URL.
If checked, the location will continue to update as the user's location is updated to the browser.
If checked, the location will have an indicator dot.
Expects type text.
The color of the indicator dot for the location. This is a text string of any valid CSS color.
Expects type text.
A color that defines the control's background that is displayed while the map control is being loaded.
If checked, the points of interest will be clickable. This is a Google map feature.
If checked, the user cannot zoom by double-clicking.
If checked, the full-screen control will be visible on the map. Clicking on this control will allow the map to take up the full screen.
Note: the full-screen control is not available in the app preview. Copy the URL from the app's top in the app preview and load it in a new window to see the full screen control.
Expects type number.
The position of the Fullscreen control.
0 - Top Right
1 - Top Left
2 - Top Center
3 - Top Right
4 - Center-Left
5 - Left Top (below Top Left)
6 - Bottom Left
7 - Top Right
8 - Center Right
9 - Bottom Right
10 - Bottom Left
11 - Bottom Center
12 - Right Bottom (below Bottom Right)
13 - Center
Determines how the map handles gestures:
cooperative - the map will cooperate with the page gestures.
greedy - all touch gestures are sent to the map.
none - the map cannot be panned or zoomed by user gestures.
auto - the gesture handling is either cooperative or greedy depending on whether the map is on a scrollable page or iframe.
If checked, the map can be controlled by available keyboard shortcuts.
Expects type number.
A number value indicating the minimum zoom level for the map. Sattelite map zoom levels differ, but most zoom map zoom levels are between 0 and 18.
Expects type number.
A number value indicating the maximum zoom level for the map. Sattelite map zoom levels differ, but most zoom map zoom levels are between 0 and 18.
Expects type number.
A number value indicating the initial zoom level for the map. Sattelite map zoom levels differ, but most zoom map zoom levels are between 0 and 18.
If checked, the rotate control will be visible on the map.
Expects type number.
The position of the Rotate control.
0 - Top Right
1 - Top Left
2 - Top Center
3 - Top Right
4 - Center-Left
5 - Left Top (below Top Left)
6 - Bottom Left
7 - Top Right
8 - Center Right
9 - Bottom Right
10 - Bottom Left
11 - Bottom Center
12 - Right Bottom (below Bottom Right)
13 - Center
If checked, a scale will be presented at the bottom of the map control.
Expects type number.
The only allowed values are 0 or 45. This allows the angle of incidence of the map to shift to 45 degrees where available.
If checked, a zoom control will be displayed on the map.
Expects type number.
The position of the Zoom control.
0 - Top Right
1 - Top Left
2 - Top Center
3 - Top Right
4 - Center-Left
5 - Left Top (below Top Left)
6 - Bottom Left
7 - Top Right
8 - Center Right
9 - Bottom Right
10 - Bottom Left
11 - Bottom Center
12 - Right Bottom (below Bottom Right)
13 - Center
If checked, the map will set the viewport to contain the marker bounds.
This event is triggered every time the map is moved, and the center is updated. The event.value will be a Place Variable Type with a formattedAddress, if one is available.
This event is triggered every time the map is moved, and the center is updated. The difference between the Geocoded center change and center change is that the Center is actually the visible center of the map. The Geocoded center is the closest geocoded point that the map can locate. This property does not contain the address.
This event is triggered every time the user changes location, and the location is updated. The event.value will be a Place Variable Type.
Add a Map Control to a Web Page. Set a couple of geocoded place markers in the Markers section. Turn on Show Directions in the Advanced options.
A object representing the center of the map. This is the closest place that the API can map to this location.
Check for details on how to style this Web Control.
