Using Google Maps API with Lightning Web Components to retrieve Latitude and Longitude - CORS issue

Question

I need to get latitude and longitude results from a text input that takes an address or zipcode. I am trying to do this with Lightning Web Components either using a LWC input with loadScript or lightning-input-address that has the Google Maps API built in.

The latitude and longitude from the user input address will be passed to a SELECT statement that uses GEOLOCATION(:lat,:long) example GEOLOCATION(10,10).

Ex:

String units = 'mi';
List<Account> accountList = 
    [SELECT ID, Name, BillingLatitude, BillingLongitude 
     FROM Account 
     WHERE DISTANCE(My_Location_Field__c, GEOLOCATION(:lat,:long), :units) < 10];

This is a public user inputing an address in a Salesforce Community. Has anyone had success using loadScript before with Google Maps?

connectedCallback() {
        Promise.all([
            //loadScript(this, 'https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap&libraries=places&v=weekly')
           //^^^ CORs issue
            loadScript(this, map)
          ]).then(() => {
              this.initMap();
          });
    } 

initMap() {
    const input = document.getElementById("pac-input");
    const autocomplete = new google.maps.places.Autocomplete(input);
}

OR does anyone know how to grab latitude and longitude from lightning-input-address?

**HTML:**
<lightning-input-address
     address-label="Search Address"
     street-label="Street"
     city-label="City"
     country-label="Country"
     province-label="Province"
     postal-code-label="PostalCode"
     street="Default Street Line"
     city=""
     country=""
     province=""
     postal-code=""
     required
     field-level-help="Select Search Address"
     show-address-lookup
     onchange={handleAddressLookupChange}>
</lightning-input-address>


**JS:**
    handleAddressLookupChange(event) {
        console.log('address', JSON.parse(JSON.stringify(event.detail)));
    }

**console log output:**
address 
{street: "10930 Fair Oaks Boulevard", city: "Fair Oaks", province: "CA", country: "United States", postalCode: "95628", …}
city: "Fair Oaks"
country: "United States"
postalCode: "95628"
province: "CA"
street: "10930 Fair Oaks Boulevard"
validity: {}
__proto__: Object

Answer 1

The address lookup is supported out of the box. You will be able to verify this only in the Production instance and not in a developer sandbox.

First, make sure in your production org you have the below settings enabled

• Type Maps in the Quick Find box and select Maps and Location Settings.
• Click Edit.
• Check Enable Maps and Location Services and hit Save.

Next just use the below code

<template>
<lightning-card title="Address Lookup using Google Maps Places API">
    <div class="slds-p-around_medium">
        <lightning-input-address
            address-label="Billing Address"
            street-label="Street"
            city-label="City"
            country-label="Country"
            province-label="Province"
            postal-code-label="PostalCode"
            street="Default Street Line"
            city=""
            country=""
            province=""
            postal-code=""
            required
            field-level-help="Select Billing Address"
            show-address-lookup
            onchange={onchange}>
        </lightning-input-address>
    </div>
</lightning-card>

Carefully note show-address-lookup attribute in there

Update

• Activate Data Integration Rules for GeoCode in your org as shown below

Use check for new data to sync the Geo Codes

Check more details here via docs here

Update

Looks like your requirement is very specific and needs some apex to make a call to Google Maps API to get coordinates. The details of the API are discussed here.