Map

Allows you to place a map on a page, set a static location, or use another location obtained using a Geo location view.

You can define the appearance and behavior of maps by setting configuration properties.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

Screen size
A configuration property that has the Screen Sizes icon The Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
Theme definitions
Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for the Map view are listed in the following table:
Table 1. Appearance configuration properties for Map
Appearance configuration property Description Data type
Map type The type of map. MapType
Zoom level The zoom level between 0, which shows the whole world, and 20, which shows details down to individual buildings when they exist. Integer
Width The Screen Sizes icon The width of the map, in pixels (px), percentage of the original map (%), or em units, for example 50 px, 20%, or 4 em. The default unit is the pixel. String
Height The Screen Sizes icon The height of the map, in pixels (px) or em units. For example 50 px or 4em. The default unit is the pixel. String
The behavior configuration properties for the Map view are listed in the following table. By default, the behavior configuration properties are cleared.
Tip: To get a user's location, use a Geo Location view. See Geo location.
Table 2. Behavior configuration properties for Map
Behavior configuration property Description Data type
Disable panning Prevents users from panning the map, which results in fixing the map location. Boolean
Hide zoom control Prevents users from zooming in and out. Boolean
Hide map type control Prevents users from changing the map type. Boolean
Hide scale control Prevents users from scaling the map. Boolean
Hide rotate control Prevents users from rotating the map. Boolean
Show marker Shows or hides the marker. It requires the Latitude and Longitude configuration properties be set. Boolean
Latitude Specifies the latitude on which to center the map. Decimal
Longitude Specifies the longitude on which to center the map. Decimal
Map source Specifies the map provider: OpenStreetMap or Bing Maps. String

Events

For the Map view, you can activate the following types of event handlers:
  • On load when the page loads, for example me.setWidth("100%")
  • On click when the map is clicked, for example ${Map}.addMarker(latLng)
  • On marker click when the marker is clicked, for example console.log(marker.lng, marker.lat)

Example

To set a map to a specific location, follow these steps.
  1. Drag the OpenLayers API view onto the page. For more information about this view, see OpenLayers API.
  2. Drag the Map view onto the page.
  3. In the Behavior configuration properties, specify the latitude and longitude.
  4. Set the map source to OpenStreetMap.
    Tip: You can find the latitude and longitude of your location in one of the following ways:
  5. Set the Appearance properties. For example, select the Roadmap type and set the zoom level to 16.

    OpenStreetMap provides only a roadmap view. Bing Maps also proposes satellite and hybrid views.

You now have a map set to a specific location. Image of a map set to a location..

Methods

For more information about the available methods, see the Map JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.