The out of the box Salesforce Scheduler service territory search screen only lets you search a location via Google API. However, it does not show those locations on a map, nor does it add more information about that territory. An example of such a use case would be letting customers know that route to that branch may be busy someday because of a rally happening near it!

Don’t worry! With a platform like Salesforce, and with a bit of code, we can easily create a new component which can do that. Below is an example of the outcome of such coding!

VIDEO: https://youtu.be/c01EH3_Wv0M

As you can see in the demo above, the following functionalities are achieved

1. Google search the location (address, city name or Zip Code)
2. Go through the list of places available around the searched address. We have hardcoded to 50 km for now
3. Set different logos to different territories
4. Show operating hours of that territory
5. Show additional information about selected territory

Let’s walk through the code:

Use of Service Territory Connect API

Salesforce provides us with a nice API to look for Service Territories based on various parameters. You can find more info about this API here: https://developer.salesforce.com/docs/atlas.en-us.chatterapi.meta/chatterapi/connect_resources_service_territories.htm
In our use case, we are using workTypeGroupId, latitude, longitude and radius.

Google Location Places API

To work with Google places API, you need to have an API key. You can get more information about obtaining a key here: https://developers.Google.com/maps/documentation/places/web-service/get-api-key You can use this key in the APEX class. GoogleLocationSearchController

If you look at the code in the class, you will notice that we are making 2 API calls. The first call returns you the address details and a place id. The second call returns you the geolocation data. Geolocation data is what is used by our scheduler connect API.

Core Logic

The brains of this functionality are in the FlowLocationController class. If you could get a Google API key, you can go ahead with the code (You need to replace the Google API key). However, if you do not have the key, you can still use this code by using the drop-downs to select city, state and country picklists.

The code path from the method searchLocationLatLang follows the logic of geolocation. Similarly, the code path of the method searchLocationString follows the logic of the state country picklist.

The method getTimeSlots returns a collection of timeslots information in a map related to an Operating Hour Id. We calculate slots information in string format since we need to show it as HTML in the maps component.

One thing to note here is we are capturing additional information about the territory from the standard Description field. In addition, the logo of each territory is stored in a custom field on Service Territory: Territory_Logo__c.

Aura Components

We have created two aura components and one event to handle location selection. First, the GoogleLocationSearch component calls Google Place API to get suggestions and geolocation information. Once Google API callout is complete, we trigger an event with latitude and longitude information via GoogleLocationSearchEvt. We then capture the event in the flowLocation component to display maps information. This component has specific design attributes which you can use to configure this component in the flows.

Following is the git repository containing all the code (https://github.com/snathpatil/scheduler-Google-map). You can deploy it to any org. Please note that this will create a new remote site setting to https://maps.Googleapis.com. Also, you need to make sure that you provide FLS to the custom field on Service Territory.

References:

1. Maps component: https://developer.salesforce.com/docs/component-library/bundle/lightning:map/example
2. Google Places Autocomplete: https://developers.Google.com/maps/documentation/places/web-service/autocomplete

Do checkout other customisations of the Location flow component here: https://unofficialsf.com/location-screen-tips-and-tricks/