Overview

Documentation

15-4-2021: There is a newer version of the widget available, based on the React framework. It is best to use the newer version as this version, based on Dojo, will not be upgraded anymore.

Description

This is an extension to the default Mendix Google Maps widget, based on version 6.0.1 of the AppStore. Extra features are:

• toggling between drag and drop mode;
• markerclustering for multiple markers;
• customizing the infowindow;
• customizing the marker.
  • Shape (6 options)
  • Size (5 options)
  • Color (entity attribute)
  • Opacity (per widget usage)
• v1.1: Reverse geocoding after dragging
  • Automatically the formatted address will be deduced via the API based on the latitude and logitude the marker was dragged to.

Typical usage scenario

When wanting to customize the markers, to have drag and drop support for end-users to reposition the marker, to show clusters of markers when too many on screen and to have heaps of styling options for single markers (different shapes, colors, sizes).

Features 

• toggling between drag and drop mode;
• markerclustering for multiple markers;
• customizing the infowindow and marker.
  • Different marker shapes and sizes are supported + the option to use a color attribute to add a specific color to some marker.

Known 'bugs'

• The Google Map will not zoom well when adding the map to a tab container in a tab pane that is not loaded directly. This is a known issue for the tab container itself. Google it.

Dependencies

• Mendix v6

Configuration

Next to the default settings available on the Mendix Google Maps widget, settings are added in four tabs:

Datasource:

Color attribute: if wanting to add custom colors to single markers, an attribute of the entity which is used for marker creation can be used. The color string should be a hexadecimal one, starting with #. So, red will be: '#FF0000'.

Appearance:

Border Color: add a hexadecimal string here to change the color of the border of the Google Map.

Marker:

Symbol: choose between one out of siz shapes to show the marker. These shapes are paths rather than images, for optimal performance;

Marker Size: choose between 5 sizes for the marker, XXS to L;

Opacity: manage the opacity of the markers shown on the Google Map. 1.0 is fully opaque, 0.0 is fully transparent

Animation Mode: determine how the objects will be plotted on the map.

Toggle Dragging: decide whether an end-user will be able to toggle between draggable and non-draggable modus;

Enable Clustering: enable or disable marker clustering when zooming out;

Grid Size: determines the maximum size of the grid shown, when clustering is enabled;

Maximum Zoom: determines the maximum zoom level at which clustering is still being done.

Interaction

On Click Microflow: the microflow to trigger when clicking on a marker. 

Disable infowindow on click: when set to true, the on click microflow will directly be triggered when clicking on the marker. If set to false an infowindow will be shown, in which a button is available to trigger the on click microflow;

Name Label: the label of the name popping up in the infowindow.