Google Map

Standard Google Map field with the following configuration tabs:

General

• Name: the name of the form component. This needs to be unique for each form. It can contain only alphanumeric chars. The name of the field is only used for internal reference - it will not be displayed in the front-end area.
• Caption: the caption or label is the text or HTML that is being displayed in the actual form.
• Default value: anything you specify here will be automatically filled in when displaying the form within the input area of the map. Inside the Default Value area you can also use custom PHP codes in between the //<code> and //</code> tags.
• Description: text/HTML area that provides a description of the field. This can be useful for providing explanations or indications for that particular field.
• Published: Set the field status by choosing Yes or No.

Validations

• As a validation rule, this can only be set to be Required or not.
• Validation Message: text / HTML area that will allow you to set up a message that will be displayed if the field validation fails.

Attributes

The Attributes area allows you to add JavaScripts triggers, custom style (for that particular field), specify map size, etc. Anything filled in this area, will be added directly to the HTML tag.

• Map Width: the width of the map, it should be specified in pixels(example: 450px).
• Map Height: the heigth of the map, it should be specified in pixels(example: 300px).
• Request Current Location: Yes / No. Enable this option if you would like to ask the user to supply his current location on the map.
• Map Center: the center of the map, specify this in coordinates
• Map Zoom: the starting map zoom, it defaults to 10.
• Enable Geolocation search: enable or not Geolocation.
• Result output: choose between showing the address or the actual coordinates when moving the map pointer.
• Map Type: Roadmap / Satellite / Hybrid / Terrain
• Size: the size of the input field.
• Additional Attributes:
  JavaScript: onchange="your_function();" - this will trigger a JavaScript function when the map input changes values.
  CSS: style="margin-left:20px" - this will set a 20px margin on the left side for the input field.
  Input property: readonly="readonly" - the map input field will not be editable for example.

13 persons found this article helpful.

You Should Also Read