aceUIGoogleMaps

The pGoogleMaps widget offers a neat way to attach location information to content by letting the user place and label markers on a Google Maps widget (currently using latest minor on version 3 of the Google Maps API).

Minion

Usage

Markers are created by clicking on an arbitrary location on the map. The label of the marker defaults to the location address (if available) but may be edited by the user.

On initialization, the widget will zoom to fit all present markers in view. If no markers exist, the view will be relocated to the location specified in the widget configuration (see below). If no location is configured, the widget will fallback to a predefined location which is the location of the Atex office in Stockholm, Sweden.

Since markers can not be placed or edited in street view mode, that mode is disabled by default. You can configure your widget to re-enable it if necessary.

Widget Interactions

  • The text input field can be used to search for locations. Each search will create a new marker for the target location.
  • The button with the arrows icon will zoom the view to fit all markers present.
  • The trash can button will remove all markers from the map.
  • The button with the GPS icon (available if the there is hardware support for it) finds your current position and adds a marker to it.

Configuration

Attribute Description Default
"height" string

A numeric value including the 'px' suffix specifying the height of the maps widget.		 "600px"
"editable" boolean

Whether or not the field should be editable.		 true
"gmConfig" object

Google Maps API configuration. For a full reference, see the Google documentation for details.
"gmApiKey" string

A Google Maps API key. See the Google documentation for details.
"gmClientId" string

A Google Maps API client id (optional, overrides api key if both are present). See the Google documentation for details.

As shown in above table, authentication by API key is required. The provided link contains information describing how to get one.

Note

The current version of Google Maps JavaScript API (3.23) has bugs with rendering and placing the autocompletion selection window when the widget is running in fullscreen mode. We recommend not enabling fullscreen mode for this version.

Localization

This widget has localization support.

The language / locale used by the third-party Google Maps will be the same as that used by other parts of the ACE UI application.

Expected domain objects

This widget expects a single domain object of type LIST::GeoLocation.

The GeoLocation is a pseudoname for a type that should be defined in the project and must be serialized into an object containing the properties:

{
  "latitude": number
  "longitude": number
  "label": string
}

Example template json

{
  "label": "Locations",
  "name": "locations",
  "widget": "aceUIGoogleMaps",

  "config": {
    "height": "550px",
    "editable": true,

    "gmConfig": {
      "center": {
        "lat": 59.33469,
        "lng": 18.06841
      }
    }
  },

  "domainObject": "myAspect/locations"
}