Using Google API in Lightning Component Salesforce

This blog describes about,using google API in lightning component in salesforce. API key act as both a unique identifier and a secret token for authentication.

Using Google API in Lightning Component

As we all know that the use of Google API is restricted in Lightning component due to some security issue, although we can use it through iframe, and also do customizations in the map. You can refer to the code given below.

Here is your Visualfoarce Page which you can include in lightning component later:

<apex:page  applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" showHeader="false" controller="GetRoute" standardStylesheets="false">
    
    <!-- 
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
     -->

    <apex:includescript value="{!urlfor($Resource.JQuery)}"/>
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
            <meta charset="utf-8"/>
            <title>Directions service</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
                #map {
                    height: 100%;
                }       
                #Mybutton{
                    display: none;
                }
            </style>
        </head>
        <body>
            <apex:form >                
                <apex:inputhidden id="start" value="{!startpoint}" />
                <apex:inputhidden id="end" value="{!endpoint}"/> 
                <button type="button" id="Mybutton">Mybutton</button>  
            </apex:form>
            <div id ="map"></div>
            <script>
                function initMap() {
                    var directionsService = new google.maps.DirectionsService;
                    var directionsDisplay = new google.maps.DirectionsRenderer;
                    var map = new google.maps.Map(document.getElementById('map'), {
                        zoom: 7,
                        center: {lat: 41.85, lng: -87.65}
                    });
                    directionsDisplay.setMap(map);
                    var st;
                    var ed;
                    $( document ).on("click" ," #Mybutton ",function(){
                        st =$("[id$='start']").val();
                        ed =$("[id$='end']").val()
                        console.log($("[id$='start']").val());
                        calculateAndDisplayRoute(directionsService, directionsDisplay);
                    });
                    if($("[id$='start']").val()!=null && $("[id$='start']").val()!=st && $("[id$='end']").val()!=null && $("[id$='end']").val()!=ed){
                        $("#Mybutton").trigger("click");
                    }       
                }
                function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                    directionsService.route({
                        origin: $("[id$='start']").val(),
                        destination: $("[id$='end']").val(),
                        travelMode: 'DRIVING'
                    }, function(response, status) {
                    if (status === 'OK') {
                        directionsDisplay.setDirections(response);
                    } else {
                        //window.alert('Directions request failed due to ' + status);
                    }
                });
                }
            </script>
            <script async="true" defer="true" src="https://maps.googleapis.com/maps/api/js?key=Your_Google_API_Key&callback=initMap">
            </script>
        </body>
    </html>
</apex:page>

The Controller 'GetRoute' used in the Visualforce Page:

public with sharing class GetRoute {

    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */

    public static string startpoint{get{
        startpoint = apexpages.currentpage().getparameters().get('startpoint');
        return startpoint;
    } set;}
    public static string endpoint{get{
        endpoint = apexpages.currentpage().getparameters().get('endpoint');
        return endpoint;
    } set;}
    
    public void nothing(){}   
}

Now we will switch to Lightning Component, here is the code:

<aura:component >

    <!-- 
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */
     -->

    <ltng:require styles="{!$Resource.SLDS +
             '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
    <aura:handler name = "init" value="{!this}" action="{!c.doinit}"/>
    <aura:attribute name="startPoint" type="String"/>
    <aura:attribute name="endPoint" type="String"/>
    <aura:attribute name="frameSrc" type="String"/>    
    <div class="wk_static">
        <div class="site-masthead slds-page-header" role="banner">
            <div class=" slds-grid slds-wrap">
                <div class="slds-col slds-has-flexi-truncate">
                  <div class="slds-media slds-no-space slds-grow">
                    <div class="slds-media__figure">
                    </div>
                    <div class="slds-media__body">
                      <h1 class="slds-page-header__title pageTitle slds-m-right--small slds-align-middle slds-truncate" title="this should match the Record Title">Using Google API in Lightning Component</h1>
                    </div>
                  </div>
                </div>
            </div>
        </div>        
        <div class="slds-grid slds-grid--vertical-align-center slds-box slds-theme--shade">
            <div class="slds-size--1-of-2 slds-m-around--small">
                <div class="slds-size--1-of-2 setmargin">
                    <div class="slds-form-element">       
                        <div class="slds-form-element__control">
                            <ui:inputselect aura:id="start" class="slds-select slds-m-bottom--small" labelclass="slds-form-element__label" value="{!v.startPoint}" label="Start" change="{!c.GetRoute}">
                                <ui:inputSelectOption text="chicago, il" label="Chicago"/>
                                <ui:inputSelectOption text="st louis, mo" label="St Louis"/>
                                <ui:inputSelectOption text="joplin, mo" label="Joplin, MO"/>
                                <ui:inputSelectOption text="oklahoma city, ok" label="Oklahoma City"/>
                                <ui:inputSelectOption text="amarillo, tx" label="Amarillo"/>
                                <ui:inputSelectOption text="gallup, nm" label="Gallup, NM"/>
                                <ui:inputSelectOption text="flagstaff, az" label="Flagstaff, AZ"/>
                                <ui:inputSelectOption text="winona, az" label="Winona"/>
                                <ui:inputSelectOption text="kingman, az" label="Kingman"/>
                                <ui:inputSelectOption text="barstow, ca" label="Barstow"/>
                                <ui:inputSelectOption text="san bernardino, ca" label="San Bernardino"/>
                                <ui:inputSelectOption text="los angeles, ca" label="Los Angeles"/>
                            </ui:inputselect>
                            <ui:inputselect aura:id="end" label="End" class="slds-select"  labelclass="slds-form-element__label" value="{!v.endPoint}" change="{!c.GetRoute}">
                                <ui:inputSelectOption text="chicago, il" label="Chicago"/>
                                <ui:inputSelectOption text="st louis, mo" label="St Louis"/>
                                <ui:inputSelectOption text="joplin, mo" label="Joplin, MO"/>
                                <ui:inputSelectOption text="oklahoma city, ok" label="Oklahoma City"/>
                                <ui:inputSelectOption text="amarillo, tx" label="Amarillo"/>
                                <ui:inputSelectOption text="gallup, nm" label="Gallup, NM"/>
                                <ui:inputSelectOption text="flagstaff, az" label="Flagstaff, AZ"/>
                                <ui:inputSelectOption text="winona, az" label="Winona"/>
                                <ui:inputSelectOption text="kingman, az" label="Kingman"/>
                                <ui:inputSelectOption text="barstow, ca" label="Barstow"/>
                                <ui:inputSelectOption text="san bernardino, ca" label="San Bernardino"/>
                                <ui:inputSelectOption text="los angeles, ca" label="Los Angeles"/>
                            </ui:inputselect>
                        </div>
                    </div>   
                </div>
                <div class="slds-size--4-of-8"></div>
            </div>
            <div class="slds-size--1-of-2 slds-m-around--small framediv">
                <iframe id="myFrame" style="height: 100%;width: 100%" src="{!v.frameSrc}"/>
            </div>
        </div>
    </div>
</aura:component>

The Controller of lightning Component:

Searching for an experienced
Salesforce Company ? Find out More

({
    
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     */

    doinit : function(component, event, helper) {       
        component.set("v.frameSrc",'https://wk-aakanksha-dev-ed--c.ap2.visual.force.com/apex/googleMap'); 
    },
    GetRoute: function(component, event, helper){
        var startpoint = component.find("start");
        var sp = startpoint.get("v.value");
        var endpoint = component.find("end");
        var ep = endpoint.get("v.value");
        
        var d = new Date();
        var n = d.getTime();
        component.set("v.frameSrc",'https://wk-aakanksha-dev-ed--c.ap2.visual.force.com/apex/googleMap?t='+n+'&startpoint='+sp+'&endpoint='+ep);
    }
})

Here is related CSS:

/**
* Webkul Software.
*
* @category  Webkul
* @author    Webkul
* @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
* @license   https://store.webkul.com/license.html
*/

.THIS .framediv{
    height: 500px;
}
.THIS .site-masthead{
    background-color: #16325c!important;   
}
.THIS .pageTitle{
    color:#ffffff!important;
}
.THIS .setmargin{
    margin: 0 auto;
}

Note : If you want to know how to integrate google map with visualforce visit the following link How To Use Google Api Key In Visualforce

Output

Support

That’s all for using google API in lightning component, still if you have any further query or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you. https://webkul.uvdesk.com/en/customer/create-ticket/

Google API in Lightning Using Google API in Lightning Component

Aakanksha Singh

6 Badges

19 Dec, 2018
Updated by - Aakanksha Singh
20 Dec, 2018
Updated by - Aakanksha Singh

3 comments

David Roberts 5 years ago

Hi Aakanksha, Looks like a great method but, sadly, it doesn’t quite work.
It draws the map but with errors.
There’s something incorrect in the visualforce page functions. Can’t see what just yet. Has anyone given feedback in the last two years?
Dave.

Uncaught SyntaxError: Invalid or unexpected token; jQuery:1
googleMap?endpoint=joplin%2C+mo&t=1544110783991&startpoint=chicago%2C+il:50
Uncaught (in promise) ReferenceError: $ is not defined

Aakanksha Singh (Moderator) 5 years ago
Hello Dave,

I’m sorry to here that, this code didn’t work on your end. There might be the following issue:

– Uncaught (in promise) ReferenceError: $ is not defined
Please verify the static resource you used for jquery in the page, the version I used back then is jQuery v1.12.4, and it is still working.

– Additionally, if you are experiencing “refused to connect” issue as I faced while revisiting the component, then Go to Setup> Security Control> Session Settings and disable these two checkboxes mentioned in the screenshot below.
https://qsnapnet.com/snaps/6hva36i59uwpzao

I hope this would resolve the issue you are facing.

Regards
Aakanksha Singh

- David Roberts 5 years ago
  Hi Aakanksha,
  Schoolboy error! My jQuery resource was a zip file when it should have been the raw test file.
  All working now.
  Great post.
  My next step is to add markers for a list of accounts. Wish me luck…
  Thank you.

Using Google API in Lightning Component