Google Map Element

The Google Map Element allows you to embed an interactive Google Maps control in your eForm.

At runtime, this will display an interactive map which can be used by the user in the same way as if they access Google Maps directly. They can zoom in and out, access different views, such as Satellite or Street View, and drop a pin on the map to indicate a location.

As the developer, you can configure the map's startup properties to display the relevant location when the page loads, set the initial zoom level, select the view, roadmap, satellite etc., and indicate directions.

In order to use the Google Map Element you will need to obtain an API Key from the Google API Console. There may be a charge to obtain a key, depending upon the usage of your form or the type of plan you have with Google. For details and to obtain a key see: http://developers.google.com/maps/documentation/javascript/get-api-key#key You will need to enter this key in the API Key property described below.

At runtime, the Element connects to Google Maps in order to display and operate the map and, hence, requires an internet connection.

  • When creating a form, if you add a Google Map Element to the form, it will display as an empty blue rectangle with rounded corners. Only when a suitable API Key is entered will the interactive map, described above, appear.

During development, if you want to operate the map, you will need to turn Design Mode off and view your form in Preview Mode.

Once you have placed a Google Map Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane.

The following properties are available:

Name and Code Name

Visible and Disabled Properties

 

Height

Specify the height of the map as you want it to appear on your form, in pixels.

The properties in this category allow you to specify data mappings for this Element and to pre-configure the data properties, if required. For example you can specify the area you want to be displayed within the map when the page loads or specify a route to be marked on the map.

You can read values in for the Data properties from a Datasource or you can pre-configure the properties when developing your form. If you map a data item to a Datasource, you cannot enter your own value as well.

If you specify input mappings, at runtime values can be read in from your specified Datasource and used to configure the display of the map. If you pre-configure the values instead, these values will be used to configure the display of the map when the page loads. If you specify output mappings for the Data properties, you can write values specified by a user at runtime to the Datasource specified, e.g. if a user drops a pin on the map to indicate a location , you can retrieve and save that location's coordinates to the Datasource.

The list below describes the meanings of the Data properties. For information about configuring data mappings for these properties refer to the separate topic: Map Data to Elements.

 

Map Type

Specifies the type of map view used to display the map. The default type is roadmap, which displays the standard road map, but you can choose a different view from the options available, such as satellite, if you prefer.

 

Centre Latitude and Centre Longitude

Coordinates identifying the central position of the map.

 

Zoom

Specifies the zoom level. The lower the number the greater the area shown within the boundaries of the Element and the less detail will be visible to the user. You will need to experiment with the value you enter here in order to work out the correct value for the required level of zoom.

 

Route Start and Route Stop

Allow you to display the route between two points on the map. You can specify the start and end points in the usual way for Google Maps, e.g. postcode, town etc. When the page loads, the map will be positioned within the Element such that the entire route is visible. Leave these properties blank if you don't want to show a route.

 

Route Type

Allows you to specify how the route identified in the Route Start and Route Finish properties above, will be traversed - by car, by bicycle, on foot or using public transport.

 

Pin Latitude and Pin Longitude

Store the coordinates identifying the location of the last pin dropped on the map by the user. You cannot specify an initial pin position except by using the Drop Pin In Centre property described above.

Clicked Event

Behaviour Category

Drop Pin in Centre

If this property is selected, a pin will be displayed in the centre of the map when the page loads. Deselect the option if you don't want the pin to be displayed.

 

Drop Pin on Click

If this property is selected, a user can display a pin anywhere on the map by clicking on the map at the appropriate point. Multiple pins can be displayed, although only the last pin's location is saved. Deselect the option if you don't want users to be able to drop pins on the map.

 

Configuration Category

API Key (Required)

enter your API Key, obtained from the Google API Console. Without a valid key, the Google Map Element will not work. You will need to reload the form after entering your Key, to make the Key take effect.

 

Styles Category

Map

Allows you to assign a style to the map Element, e.g. to set a border around the Element.