Salesforce & Google Maps Integration

Himanshu Varshney
Senior Salesforce Developer
December 8, 2023

GoogleMapsSalesforce


Step 1: Set up Google Maps API Credentials

  1. Go to the Google Cloud Console.
  2. Create a new project or select an existing one.
  3. Enable the "Maps JavaScript API" for your project.
  4. Create API credentials (API Key).

Step 2: Create an Apex Class for Integration

// GoogleMapsIntegrationController.cls

public class GoogleMapsIntegrationController {
   public static String getGoogleMapsApiKey() {
       // Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key
       return 'YOUR_GOOGLE_MAPS_API_KEY';
   }

   public static List<Account> getAccountsForMap() {
       // Query accounts or customize as per your use case
       return [SELECT Id, Name, BillingStreet, BillingCity, BillingState, BillingCountry, BillingPostalCode FROM Account LIMIT 10];
   }
}


Step 3: Create an Aura Component


<!-- GoogleMapsIntegration.cmp -->

<aura:component controller="GoogleMapsIntegrationController">
  <aura:attribute name="accounts" type="List" />

  <aura:handler name="init" value="{!this}" action="{!c.init}" />

  <div id="map"></div>

  <script>
      // Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key
      const googleMapsApiKey = '{!GoogleMapsIntegrationController.getGoogleMapsApiKey()}';

      function initMap() {
          const map = new google.maps.Map(document.getElementById('map'), {
              center: { lat: -34.397, lng: 150.644 },
              zoom: 8
          });

          // Add markers for each account
          {!c.addMarkers}
      }
  </script>
</aura:component>


Step 4: Create the Aura Component Controller

// GoogleMapsIntegrationController.js

({
   init: function (component, event, helper) {
       // Fetch accounts from Salesforce
       var action = component.get("c.getAccountsForMap");
       action.setCallback(this, function (response) {
           var state = response.getState();
           if (state === "SUCCESS") {
               component.set("v.accounts", response.getReturnValue());
               helper.loadGoogleMapsScript();
           } else {
               console.error('Error fetching accounts');
           }
       });
       $A.enqueueAction(action);
   },

   addMarkers: function (component, event, helper) {
       var accounts = component.get("v.accounts");
       var map = new google.maps.Map(document.getElementById('map'));

       for (var i = 0; i < accounts.length; i++) {
           var account = accounts[i];
           var address = account.BillingStreet + ', ' + account.BillingCity + ', ' +
               account.BillingState + ', ' + account.BillingCountry + ' ' + account.BillingPostalCode;

           // Use the address to get latitude and longitude using Google Geocoding API
           // Add a marker for each account using the obtained coordinates
           {!c.addMarker}(map, address, account.Name);
       }
   },

   addMarker: function (map, address, title) {
       // Use the Google Geocoding API to get latitude and longitude
       // Create a marker and add it to the map
   }
});


Please note that the addMarker function needs to be implemented to make a callout to the Google Geocoding API to convert the address to latitude and longitude.

Additionally, you may need to handle asynchronous loading of the Google Maps API script. The loadGoogleMapsScript function in the helper should be responsible for dynamically loading the script. Ensure that you replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual API key.

Remember to handle errors, implement proper error handling, and adjust the code based on your specific requirements and best practices.

Share this article:
View all articles

Related Articles

The Two Forces Reshaping Dentistry: Aging Patients and the Cosmetic Boom featured image
April 13, 2026
Two powerful forces are driving unprecedented growth in the dental industry: a rapidly aging population with complex restorative needs, and a surging cosmetic dentistry market fuelled by social media and rising disposable income. Here's what every dental clinic owner needs to know.

Unlock the Full Power of AI-Driven Transformation

Schedule Demo

See how Anablock can automate and scale your business with AI.

Book Demo

Start a Support Agent

Talk directly with our AI experts and get real-time guidance.

Call Now

Send us a Message

Summarize this page content with AI