First step

Google API Key and default map center.

1. Go to your backend settings, click on Fencus Google Maps Widgets.
2. Define your Google Maps Browser API Key.
   • This plugin depends on Google Maps JavaScript API, for its use you need an API Key, provided by Google, click here to know more and get an API Key.
3. Set the default map center for the FormWidgets.
   • This will be the starting position of the maps shown by the FormWidgets.

Location selector FormWidget

Description

Indicates a given position on a map using a marker.

Usage

latlng:
    label: Location
    type: location-selector
    height: 450px
    width: 100%

• type: Must be location-selector.
• height: Height of the FormWidget. (Optional, format in px or %).
• width: Width of the FormWidget. (Optional, format in px or %).
• Returns the value as a google.maps.LatLngLiteral object (in string format so you can store it in your database).

Warnings

• Compatible to use with Address Locator FormWidget.
• Incompatible with Map Configurator FormWidget and Address Finder FormWidget.

Address Locator FormWidget

It works in conjunction with the Location Selector FormWidget, it allows you to find an address using Google Maps Geocoding Service, when an address is selected it automaticaly places the Marker of the Location Selector FormWidget on it.

Usage

address:
    label: Address
    type: address-locator

• type: Must be address-locator.
• Returns a string with the selected address.

Warnings

• Requires Location Selector FormWidget to be used.
• Incompatible with Map Configurator FormWidget and Address Finder FormWidget.

Address Finder FormWidget

It allows you to find an address using the Google Maps Geocoding Service.

Usage

address:
    label: Address
    type: address-finder

• type: Must be address-locator.
• Returns a string with the selected address.

Warnings

• Incompatible with Location Selector FormWidget, Address Locator FormWidget and Map Configurator FormWidget.

Map Configurator FormWidget

Configure the options of a Google Map and shows a preview of it LIVE:

• Select the initial position of the map.
• Select the initial zoom of the map.
• Enable/disable the scrollwheel to zoom in and out.
• Enable/disable StreetView option.
• Enable/disable full screen option.
• Enable/disable the Map Type Selector.
• Define the position of the Map Type Selector.
• Define the Style of the Map Type Selector.
• Select witch Map Type to use by default.
• Select the available Map Types to use.
• Enable/disable the Zoom Control.
• Define the position of the Zoom Control.
• Show markers form a relation or function on the map.

Usage

options:
    label: Options
    type: map-options
    height: 450px
    width: 100%
    markers: locations
    function: false

• type: Must be map-options.
• height: Height of the FormWidget. (Optional, format in px or %).
• width: Width of the FormWidget. (Optional, format in px or %).
• markers: Relation or function of the model used to get the markers (it allows Deferred binding), the models or results must have these attributes: $name, $latlng and optionaly $info_window. (Optional).
  • $name: String.
  • $latlng: Must be a google.maps.LatLngLiteral object in String Format.
  • $info_window: Infowindows are displayed when the marker is clicked, must be a string with html format.
• function: Specifies if the markers variable is a relation or a function. (Optional).
• Returns the value as a google.maps.MapOptions object (in string format so you can store it in your database)

Example using a function to get the markers:

options:
    label: Options
    type: map-options
    height: 450px
    width: 100%
    markers: getLocations
    function: true

• The function of the model must return an array of objects with the attributes: $name, $latlng and optionaly $info_window as estated before.

Warnings

• Incompatible with Location Selector FormWidget, Address Locator FormWidget and Address Finder FormWidget.

An API Loader Component

Usage

1- Configure your API Key on the backend settings.

2- Place the API Loader Component on your page or layout.

3- Select which additional libraries to load if needed: drawing, geometry, places and visualization.

The API Loader does two things:

• Loads the Javascript API from Google.
• Initilizes all the maps using the Map Behavior.

Because of that, you should place the API Loader Component BEFORE using the HTML code generated by the behavior.

A Map Behavior

Usage

1- Implement the Map Behavior on your class:

class Map extends Model
{
    public $implement = [
        'Fencus.GoogleMapsWidgets.Behaviors.Map',
    ];
}

2- Use the following function to obtain a HTML code, ready to be used on the front-end:

$html = $map->getHtmlMap($alias,$markers);

• alias: Must be a name to identify this map to avoid conflicts with others (without whitespaces), if you are using this fuction on a component, the most recomendable thing is to pass the alias of the component ($this->alias).
• markers: These are the markers to be shown on the map, they must have the following attributes: $name, $latlng and optionaly $info_window.
  • $name: String.
  • $latlng: Must be a google.maps.LatLngLiteral object in String Format.
  • $info_window: Infowindows are displayed when the marker is clicked, must be a string with HTML format.

Warnings

• You need to use the API Loader Component BEFORE the HTML code generated by the Behavior.

A Geolocation Component

Just add the component to your layout, the component will get an approximate position from the user Browser using HTML5 or by its IP Address using Google Geolocation Web Service and will add three keys to the users session:

• geolocation: A google.maps.LatLngLiteral object in String Format.
• geolocationType: This could be 'HTML5' or 'IP'.

• geolocationAccuracy: The approximate radius between the user and the geolocation position.

  • You need an API Key with Google Geolocation Web Service enabled to use this component.
  • Remember that we do not held responsability for the use of this component.