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

Reducing Operational Costs with AI Chatbots: A Smart Business Move featured image
December 29, 2025
Operational costs often rise because teams spend too much time on repetitive, low-value work. This article explains how AI chatbots reduce those costs by deflecting routine requests, shortening support interactions, automating back-and-forth workflows, and allowing businesses to scale without hiring linearly. It also shows how Anablock designs cost-effective AI chatbot solutions that deliver measurable automation savings while improving customer experience.
Cross-Industry Applications of AI Chatbots featured image
December 23, 2025
AI chatbots are no longer limited to basic FAQs. This article explores how the same conversational AI technology is being applied across healthcare, real estate, finance, hospitality, e-commerce, SaaS, and internal operations. You will see practical examples of how businesses use chatbots to automate repetitive tasks, improve responsiveness, and connect systems across industries, along with guidance on choosing the right starting use case.
10 CRM Admin Tasks You Should Automate with AI featured image
December 22, 2025
If being a CRM admin feels like nonstop cleanup, this article is for you. It breaks down ten time consuming CRM admin tasks that can be automated with AI, from deduplication and data enrichment to workflow monitoring and documentation. You will see how AI shifts CRM administration from manual maintenance to intelligent system design, and how Anablock helps make that transition practical and safe.

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