Google Maps Component

Overview

Google Maps Component Plugin provides support for displaying interactive maps, directions, and markers in a SAIL interface.

Pre-requisites: 

Key Features & Functionality
  • fn!googleMapsDisplayField
    • Displays a map centered on a specific latitude and longitude, with an optional pre-set list of custom markers. When a user clicks on a marker, the metadata is returned via a SaveInto.
    • Optionally allows the user to pan, use street view, and zoom.
  • fn!googleMapsDirectionsField
    • Displays map directions between 2 or more points.
    • It can automatically sort the waypoints to calculate the optimal route between the origin and destination. When the directions are computed, step-by-step directions, trip distance, and time are returned via a SaveInto.
    • Optionally displays current traffic conditions as an overlay, and exposes route options such as avoiding highways, ferries, or tolls. Also able to display custom markers.
  • fn!googleMapsPinField
    • Displays a map where a user can drop and reposition a marker.
    • When no marker is selected a default map center position can be set and used.
Anonymous
  • is there an issue with this plugin on Cloud hosted Appian Instance?
    it seems there is a new Content Policy restriction placed in the cloud web server to block external content, this error is visible in the Network / console view of the browser:

    Refused to connect to 'maps.googleapis.com/.../gen_204 because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

    Refused to load the script 'maps.googleapis.com/.../map.js' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback

  • Is anybody else experiencing issues with the plugin running on version 21.1?  I'm not getting any errors, but the map is blank.  I know my API key works as I'm using the connected system just fine.

  • Never mind, it looks like this Maps api doesn't use URL signing.

  • Hi Everybody, has anyone used fn!googleMapsDisplayField with URL signing secret? 

  • Good day!  We want to us this address validation but cannot seem to get the Zip Code pulling through.  https://developers.google.com/places/web-service/autocomplete  From the Google API, it looks like there is the capability to pull through the postal/code or zip code of the address; but it is not showing up in the return.  


    From my research, it appears that there are some options to enable:

    the (regions) type collection instructs the Places service to return any result matching the following types:

    • locality
    • sublocality
    • postal_code
    • country
    • administrative_area_level_1
    • administrative_area_level_2

    How can we get the addin to pull back the postal_code?

  • This component plugin does not have a JAR file.

    In a cloud environment, you can install the plugin via the admin console. For an on-premise installation, you will need to drop the plugin zip in the <APPIAN_HOME>/_admin/plugins/ directory.

    This specific plugin is bundled with an example application. You will need to download and extract the combined zip file from this page.  The actual plugin zip ends with _signed.zip.

  • With a single marker, you will need to set the map center and zoom level. The content parameter is the text shown if you click on the marker. Does the following example work for you?

    fn!googleMapsDisplayField(
      googleMapsApiKey: "YOUR API KEY",
      mapCenter: {
        lat: 25.7617,
        lng: 80.1918
      },
      mapMarkers: {
        {
          name: "MyPoint",
          content: "",
          lat: 25.7617,
          lng: 80.1918
        }
      },
      zoomLevel: 10
    )

  • Thanks Andy.. But this still dint resolve. I thin i would need to pass some valid value in content as well.. 

  • You need to wrap your "MyPoint" marker in another set of curly brackets. That parameter is expecting a list of markers since there can be more than one on a single map.

    mapMarkers: {
      {
        name: "MyPoint",
        content: "",
        lat: 25.7617,
        lng: 80.1918
      }
    }

  • Can someone paste the sample code for the googleMapsDisplayField() function. I am able to connect to the GMaps and also use the googleMapsDirectionsField() which is pretty straight forward. However, for googleMapsDisplayField. we need to pass the markers eg: 

    mapMarkers: {
    name: "MyPoint",
    content: "",
    lat: 25.7617,
    lng: 80.1918
    },

    Would appreciate if someone already tried this and working could help here.

    Thanks in adv.

    Regards,

    Raghu