Get distance duration time between two zip code in uber style

Understanding customers and running a smooth business are two of the major specialties of Salesforce. When the sales and marketing team faced challenges in assigning territories, finding nearby prospects, campaigning on a particular location and more such geolocation activities, Salesforce unlocked a whole new way into this world of navigation.

Winter 19 introduced many components including lightning:map which is very useful for developers. Before lightning:map, the developers needed Google API key and lots of script to show address on the Google Map. The lightning:map component displays a map of one or more locations using Google Maps securely.

This component requires API version 44.0, making it easy to display the user location in the UI. There is no need to use external JavaScript libraries anymore. Developers can use markers in the component to define location on the map wherein the marker could be a pair of coordinates (latitude and longitudes), or a set of address elements such as Street, City, State, Country or Postal Code.

Steps involved in the overall Setup:

API setup on Google G-suite account
Develop Apex classes
Develop Lightning Component

API SETUP:

We need to have Google Developer account where we will be creating a Project.
We need to have Places API enabled.
The API documentation to setup the API on Google is – API documentation

For Live Demo Click Here

Step 1- Create Apex Wrapper Class

Step 2- Create an Apex Class Controller:

Step 3 – Create Lightning Component

Step 4 – JS Controller

Step 5- lightning App

Conclusion:

Above is the implementation of the lightning component enabling us to find the distance between two zip codes using Google API. We have used wrapper classes to send data to the map component. The location wrapper is used to store the address while the address wrapper is used to provide marker specific details.

If you need further assistance or have any queries to make your Salesforce classic apps compatible with lightning experience, please feel free reach out.

Happy Learning!

Share This Blog

Steps involved in the overall Setup:
API SETUP:
For Live Demo Click Here
Step 1- Create Apex Wrapper Class
Step 2- Create an Apex Class Controller:
Step 3 – Create Lightning Component
Step 4 – JS Controller
Step 5- lightning App
Conclusion:

How to Create an Agentforce-Enabled Scratch Org in Salesforce

Setting up an Agentforce-enabled scratch org is the most important step for developers who want to experiment with AI features such as Prompt Builder and Einstein GPT. Whether you’re developing the next generation CRM software or experimenting with how generative AI may improve user experience, a scratch org equipped with Agentforce is your playground. Follow […]

Step-by-Step Guide to Enhance Your LWC Development Workflow with the Logger API

Are you looking to streamline your LWC development workflow but confused about how to do it? Then you are in the right place. The Salesforce Logger API is a powerful tool that helps you monitor, debug, and improve code quality in real time. This step-by-step guide walks you through how to set it up and […]

Enhancing Your Salesforce Experience with a Custom Activity Component

In today’s fast-paced business landscape, productivity hinges on streamlined workflows and intuitive interfaces. While Salesforce offers robust activity tracking capabilities, sometimes the standard components fall short of specific organizational needs. That’s where a Custom Activity Component comes in—designed to tailor your activity management experience, boost user efficiency, and provide deeper insights into customer interactions. In […]

A Step-by-Step Guide to Integrating Salesforce Doc-Gen with eSigning Tools

In today’s fast-paced digital landscape, streamlining document workflows is no longer a luxury—it’s a necessity. Integrating a document generation app, like Docs Made Easy, with an eSigning tool, helps businesses automate the entire document lifecycle—from creation to signature—saving time, reducing errors, and boosting productivity. In this guide, we’ll walk you through the key steps, tools, […]

How to Build a Real-Time Chat Application Using LWC and Models API

The Models API plays a significant role in providing access to and facilitating interaction with large language models (LLMs) from various Salesforce partners such as Anthropic, Google, and OpenAI. It enables applications to leverage these models for various tasks, including text generation and other AI-powered capabilities. As a user, you can configure any Salesforce-enabled model […]

How to Integrate Salesforce Data Cloud with Amazon Redshift Using Salesforce Identity Provider

Companies can finally connect Amazon Redshift to Salesforce Data Cloud without using the ordinary username & password authentication systems ever since its collaboration with AWS has happened. Business owners no longer have to be concerned about managing static credentials or breaching data security. By leveraging Salesforce IDP, companies can easily access their data lakehouse in […]

Get distance duration time between two zip code in uber style

Steps involved in the overall Setup:

API SETUP:

For Live Demo Click Here

Step 1- Create Apex Wrapper Class

Step 2- Create an Apex Class Controller:

Step 3 – Create Lightning Component

Step 4 – JS Controller

Step 5- lightning App

Conclusion:

Share This Blog

Table of contents

Related Articles

Our Location worldwide

India

USA

UK

Canada