Google Map

This topic describes Google Map plug-in properties.

Use the plug-in to enhance your location-based decision-making and streamlining operational processes. The Google Map plug-in provides access to detailed geographical data and also allows to customize map markers for various types of data.

Refer to Visuals Tab for more information on the layout of widgets in Configuration Hub.

Google Map Properties

Field Name Description
Google API Key To access Google Maps services, enter the Google API key.

You can get the Google API Key from here: https://cloud.google.com/maps-platform/. Follow the on-screen instructions to generate the API key.

View Mode Select from these available view modes to configure how your map appears to users:
  • Roadmap: Displays standard road map.
  • Satellite: Displays satellite imagery.
  • Terrain: Displays physical terrain features.
  • Hybrid: Combines satellite imagery with road and feature labels.
Location Choose from Data, Manual, or User Location to provide location details.
  • Select Data to dynamically specify the location on the map. Use any of these options to retrieve latitude and longitude values from a data source.
    Select a query that can fetch the values.
    Select a global variable that contains the values.
    Manually type in the latitude and longitude values separated by a comma. For example 40.7128, -74.0060 represents the coordinates of New York City.
  • Select Manual to manually enter the location coordinates. The following text fields appear to type in the values:
    • Latitude
    • Longitude
  • Select User Location to automatically pull the coordinates based on your current location.
Zoom Level The zoom level determines how much of the map is visible and how close the view is to the specified latitude and longitude.

Set an integer value. A higher value gets you a closer and more detailed view of the specified location. A lower value provides you with a wider, more zoomed-out view.

Markers You can add multiple markers on the map. Markers represent data points. You can use markers to locate areas on the map easily. At runtime, selecting a marker can provide additional information on the location, such as its name, address, phone number, or website. You can modify the marker's icon, color, and shape to convey specific locations.
  1. Select Add to add a marker.
  2. Shape: Choose from the list of available markers.
  3. Type:
    Select Data to dynamically set the marker on the map. Specify a query that can fetch the marker related values from a data source.
    Select Manual to type in the marker's location.
Action Markers represent data points. You can use markers to locate areas on the map easily. At runtime, selecting a marker can provide additional information on the location, such as its name, address, phone number, or website.
You can add multiple actions to a single marker.
  1. Select Add Action.
  2. Action: Select an action you want to perform when the marker is clicked on the map.
  3. Query: Select a query to be executed when the marker is clicked on the map. This displays the data associated with the marker.
Add Conditions This property allows you to add conditions to marker actions. You can specify that an action should only be triggered if certain conditions are met.
GeoJSON URL Enter a GeoJSON URL.

GeoJSON (Geographic JavaScript Object Notation) data is retrieved from the URL and displayed on the map. You can use such data to visualize custom geographical information on a web map.

KML URL Enter a KML URL.

The API retrieves the KML (Keyhole Markup Language) data from the URL and displays it on the map. With such information, you can create custom map layers.

Heatmap Use this property to generate a heatmap layer based on your data points and display it on the map. With a heatmap, you can visualize large datasets and identify patterns or trends in the distribution of data points.

For adding values, refer to Bind Your Data to Plug-ins.

Traffic Layer Select the check box if you want to display traffic congestion, road conditions, etc. on the map. This property is useful for applications relying on navigation information.
Bicycle Layer Select the check box if you want to show bike lanes, cycling routes, etc. on the map. This property is useful for applications that cater to cyclists to provide bike-friendly navigation information.
Transit Layer Select the check box if you want to show bus stops, train stations, transit routes, etc. on the map. This property is useful when applications want to include information on public transportation.
Show Businesses Select the check box if you want to show business areas of interest on the map. For example, restaurants, hotels, and shops.
Show Map Type Select the check box if you want to provide an option on the map to switch between different map types, such as roadmap, satellite view, terrain view, and hybrid view.
Show Zoom Buttons Select the check box if you want to provide zoom buttons on the map. The button controls help to zoom in and out of the map.
Disable Mouse Controls Select the check box if you want to disable the use of mouse on the map. Which means you cannot perform actions like pan or zoom the map using a mouse.
Show Full Screen Select the check box if you want to provide an option to view the map in full-screen mode.
Show Street View Select the check box if you want to enable the "Street View" feature for the map. This feature allows to virtually explore the streets and neighborhoods on the map.
Show/Hide
Note: This property is used to control the visibility and behavior of a plug-in/widget on the application interface.
You can add conditional statements to show or hide the plug-in.
Hidden
Note: This property is used to control the visibility and behavior of a plug-in/widget on the application interface.

As a best practice, either apply 'conditions' or mark as 'hidden', but not both simultaneously.

Select this check box if you want to hide a plug-in using the Hidden property. Remember, the plug-in remains hidden until a specific action is taken, such as clicking a button designed to reveal it.

In order to support the visibility behavior, associate a button to allow for a show/hide action.

Scoped CSS Select the check box to enable CSS scoping for the plug-in. This property allows you to isolate the CSS styles specific to the plug-in. As a result, any modification to the plug-in's CSS stylesheet will not affect the global CSS defined for the application.