Topics on this page

Configure Google Maps in BriteSuite

You can integrate BriteSuite policies with Google Maps to take advantage of geocoding. Geocoding refers to locations in terms of latitude and longitude coordinates, which is more accurate than describing a location’s address with street names.

Geocoding offers several benefits:

  • Makes risk assessment much easier and more accurate.
  • Pinpoints risk/asset locations.
  • Enhances risk assessment accuracy for perils/natural calamities, such as earthquakes, floods, and hurricanes.
  • Increases data management efficiency.
  • Improves coverage pricing for local offices and consignments.

Implement Google Maps

You have two options to implement Google Maps with BriteSuite:

  • Use BriteCore’s Google Maps plugin to provide address autocompletion. If you choose to use our prewritten plugin, all you need to do is map your data (Step 2 and Step 3).
  • You can write your own plugin using custom logic.

Notes:

Our team provides data mapping as an additional service.

Plugins are currently available only in the quote flow for Auto policies.

To learn more about plugins, please refer to BriteCore’s plugins documentation.

This tutorial walks you through implementing Google Maps in BriteCore if you want to write your own plugin. It also helps you understand how Google Maps integrates with BriteSuite.

Google Maps options

Autocomplete

Autocomplete offers a type-ahead search when you type address line 1. A list of potential address values displays. Select one of the values and the rest of the fields are prefilled. You can then optionally add the apartment or unit number if applicable.

Multiple option selection

With multiple option selection, you will type Address Line 1 and Zip Code. After typing in the initial information, press a button for a pop-up window to appear with the standardized addresses; then, select the correct address.

Longitude and latitude

With this option, there will be two fields available to return the latitude and longitude. The latitude and longitude fields are automatically filled once the address is entered. This field can be hidden from agents.

Set up Google Maps in BriteSuite

To set up Google Maps in BriteSuite:

Step 1: Contact the BriteCore Support team

Contact the BriteCore support team to install Google Maps on your site via BriteDeploy. You will need to provide your Vendor Security Key.

Step 2: Consider your configuration options

Consider your configuration options and fill out the Google Maps configuration questionnaire.

Step 3: Create the data mapping

Map the data from Google Maps to your Lines configuration. Take your specific user-defined fields from Lines and map them to the data you’re receiving from Google Maps (and back).

To learn more about how data mapping works in BriteCore, please refer to our data mapping documentation.

Sample data for a POST/mappings request.

View code

{
 “data”: {
       “type”: “mapping”,
    “attributes”: {
      “from”: “googlemaps”,
      “to”: “quote”,
      “mapping” : {
      “template” : “{% set stateLabels = OrderedDict([(\”Alabama\”, \”aLAlabama\”),(\”Alaska\”, \”aKAlaska\”),(\”Arizona\”, \”aZArizona\”),(\”Arkansas\”, \”aRArkansas\”),         (\”California\”, \”cACalifornia\”),(\”Colorado\”, \”cOColorado\”),(\”Connecticut\”, \”cTConnecticut\”),(\”Delaware\”, \”dEDelaware\”),(\”District of Columbia\”,     \”dCDistrictofColumbia\”),(\”Florida\”, \”fLFlorida\”),(\”Georgia\”, \”gAGeorgia\”),(\”Hawaii\”, \”hIHawaii\”),(\”Idaho\”, \”iDIdaho\”),(\”Illinois\”, \”iLIllinois\”),(\”Indiana\”,   \”iNIndiana\”),(\”Iowa\”, \”iAIowa\”),(\”Kansas\”, \”kSKansas\”),(\”Kentucky\”, \”kYKentucky\”),(\”Louisiana\”, \”lALouisiana\”),(\”Maine\”, \”mEMaine\”),(\”Montana\”, \”mTMontana\”),   (\”Nebraska\”, \”nENebraska\”),(\”Nevada\”, \”nVNevada\”),(\”New Hampshire\”, \”nHNewHampshire\”),(\”New Jersey\”, \”nJNewJersey\”),(\”New Mexico\”, \”nMNewMexico\”),(\”New York\”,   \”nYNewYork\”),(\”North Carolina\”, \”nCNorthCarolina\”),(\”North Dakota\”, \”nDNorthDakota\”),(\”Ohio\”, \”oHOhio\”),(\”Oklahoma\”, \”oKOklahoma\”),(\”Oregon\”, \”oROregon\”),   (\”Maryland\”, \”mDMaryland\”),(\”Massachusetts\”, \”mAMassachusetts\”),(\”Michigan\”, \”mIMichigan\”),(\”Minnesota\”, \”mNMinnesota\”),(\”Mississippi\”, \”mSMississippi\”),   (\”Missouri\”, \”mOMissouri\”),(\”Pennsylvania\”, \”pAPennsylvania\”),(\”Rhode Island\”, \”rIRhodeIsland\”),(\”South Carolina\”, \”sCSouthCarolina\”),(\”South Dakota\”,   \”sDSouthDakota\”),(\”Tennessee\”, \”tNTennessee\”),(\”Texas\”, \”tXTexas\”),(\”Utah\”, \”uTUtah\”),(\”Vermont\”, \”vTVermont\”),(\”Virginia\”, \”vAVirginia\”),(\”Washington\”,   \”wAWashington\”),(\”West Virginia\”, \”wVWestVirginia\”),(\”Wisconsin\”, \”wIWisconsin\”),(\”Wyoming\”, \”wYWyoming\”)]) %}{ \”garagingAddress\”: \”.  {{source.data[0].attributes.address_line_1}}\”, \”garagingTown\”: \”{{source.data[0].attributes.address_city}}\”, \”garagingState\”:   \”garagingState_{{stateLabels[source.data[0].attributes.address_state]}}\”, \”zipCode5DigitsOnly\”: \”{{source.data[0].attributes.postal_code}}\”}”
                }
          }   

       }
}

Step 4: Write the plugin

Important: If you’re using BriteCore’s Google Maps plugin, skip this step.

To write your own plugin, interface with our Google Maps API endpoints.

Add the following script to the header of your HTML file:

View code

<script src="https://unpkg.com/@britecore/ui-plugins-client"> </script>

You can now use the BriteCorePlugin helper so your plugin can communicate with BriteCore:

View code

var plugin = new BriteCorePlugin(PLUGIN_NAME)
​         plugin.initialize({
        ‘auto-complete’: {
          inputs: [
            {
              placeholder: ‘Address’,
              querySearch: querySearch,
              handleSelect: handleSelect,
              prefixIcon: [‘fas’, ‘location-arrow’],
              triggerOnFocus: true,
            },
          ],
        },
      })

Step 5: Host your plugin in a public location

If you’re using BriteCore’s Google Maps plugin, BriteCore hosts the plugin for you. Otherwise, each plugin is an HTML document rendered in a hidden iframe. BriteCore’s UI queries the plugins available and renders any plugin on the specified pages.

Since BriteCore’s UI runs in a browser, the request for the plugin must occur without credentials to a publicly available location, or BriteCore must host the plugin placing the HTML file behind our authentication.

Step 6: Register the plugin in BriteIntegrations

If you’re using BriteCore’s Google Maps plugin, BriteCore registers the plugin for you.

Otherwise, send an API call to BriteIntegrations using the /plugins/ endpoint to POST the following payload:

View code

{

    “data”: {

            “attributes”: {

                “base_url”: “https://integrations.<client_url>.britecore.com”,

                “configuration”: {},

                “name”: “GoogleMaps”,

                “plugin_slots”: [

                    {

                        “plugin_file_path”: “/googlemaps/plugin/”,

                        “slot_name”: “britequote:risk-edit:bottom-row:auto-complete”

                    }

                ]

            },

            “type”: “plugin”

        }

}

Sample plugin implementation code

Below is example code for how you can implement the plugin.

Note: Don’t cut or paste the code. It won’t run without inserting it into a build and manipulating it. Use this code as a reference.

View code

import {BriteCorePlugin, BriteCorePluginRequest} from ‘@britecore/ui-plugins-client’

export const PLUGIN_NAME = ‘GoogleMaps’
/**
  Error type which is used when there are issues with requests to DataMapping service.
*/
export class DataMappingServiceError extends Error {}
/**

* Makes the GET request to the GoogleMaps integration and returns the results.

*

* @param input The text input from the ui.

*/

export async function fetchSuggestions(input, parent) {
  // Configuring an API url override is convenient for local dev
  const apiUrlOverride = process.env.GOOGLE_MAPS_API_URL
  if (apiUrlOverride) {
    const response = await  fetch(`${apiUrlOverride}/suggestions/?search=${input}`)
    return await response.json()
  } else {
    const request = new BriteCorePluginRequest(parent, PLUGIN_NAME)
    const url = `/googlemaps/suggestions/?search=${input}`
    const {data} = await request.get(url)
    return data
  }
}

/**

* Makes the POST request to the GoogleMaps geocode API and returns the results.

*

* @param address The address to geocode.

*/

export async function fetchGeocoding(address, parent) {
  // Configuring an API url override is convenient for local dev
  const apiUrlOverride = process.env.GOOGLE_MAPS_API_URL
  const body = {
    data: {
      type: ‘address’,
      attributes: {
        formatted_address: address,
      },
    },
  }
  if (apiUrlOverride) {
    const response = await fetch(`${apiUrlOverride}/geocode/`, {
      method: ‘POST’,
      body: JSON.stringify(body),
    })
    return await response.json()
  } else {
    const request = new BriteCorePluginRequest(parent, PLUGIN_NAME)
    const url = `/googlemaps/geocode/`
    const {data} = await request.post(url, body)
    return data
  }

}

/**

* Makes a datamapping request to shape the address data for updating the quote.

*

* @param address The address to pass to the datamapper.

*/

export async function mapSelectedAddress(address, parent) {
  const request = new BriteCorePluginRequest(parent, PLUGIN_NAME)
  let mapped
  try {
    const response = await request.makeMappingRequest(‘googlemaps’, ‘quote’, address, ‘template’)
    mapped = response.data
  } catch (error) {
    throw new DataMappingServiceError()
  }
  return Object.keys(mapped)
    .filter((key) => {
      return mapped[key] !== undefined && mapped[key] !== null
    })
    .map((key) => {
      return {
        op: ‘replace’,
        path: ‘/field_answers/’ + key,
        value: mapped[key],
      }
    })
}

/**

* Provide autocomplete suggestions based on text input from the user.

*

* @param input The text input from the ui.

*/

export async function querySearch(input) {
  if (!input || input.length < 3) return []
  const json = await fetchSuggestions(input, this.parent)
  const {data} = json
  const suggestions = data.map((i) => ({value: i.attributes.address, id: i.id}))
  return suggestions
}

/**

* Called when an address is selected by the user.

*

* @param address The address selected by the user.

*/
export async function handleSelect(address) {
  const {value} = address || {}
  if (!value) return
  try {
    const geocoding = await fetchGeocoding(value, this.parent)
    const jsonPatch = await mapSelectedAddress(geocoding, this.parent)
    this.parent.updateRisk(jsonPatch)
   this.parent.displayMessage(‘Address was updated successfully.’)
  } catch (error) {
    if (error instanceof DataMappingServiceError) {
      this.parent.displayErrors(‘Google Maps data mapping is not configured properly.’)
    } else {
      this.parent.displayErrors(‘Something went wrong while attempting to update the quote. Please try again.’)
    }
  }
}
export const plugin = new BriteCorePlugin(PLUGIN_NAME)