{"id":802,"date":"2016-10-03T05:52:22","date_gmt":"2016-10-03T05:52:22","guid":{"rendered":"https:\/\/eshopsync.com\/?p=802"},"modified":"2025-10-14T10:02:27","modified_gmt":"2025-10-14T10:02:27","slug":"using-google-api-lightning-component","status":"publish","type":"post","link":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/","title":{"rendered":"Using Google API in Lightning Component"},"content":{"rendered":"

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.<\/p>\n

\n
\n

Using Google API in Salesforce Component<\/h2>\n<\/div>\n<\/div>\n
\n

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.<\/p>\n

 <\/p>\n

Here is your Visualfoarce Page<\/strong> which you can include in lightning component later:<\/p>\n

<apex:page  applyHtmlTag=\"false\" applyBodyTag=\"false\" docType=\"html-5.0\" showHeader=\"false\" controller=\"GetRoute\" standardStylesheets=\"false\">\r\n        <!-- \r\n        \/**\r\n         * Webkul Software.\r\n         *\r\n         * @category  Webkul\r\n         * @author    Webkul\r\n         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n         * @license   https:\/\/store.webkul.com\/license.html\r\n         *\/\r\n         -->\r\n\t<apex:includescript value=\"{!urlfor($Resource.JQuery)}\"\/>\r\n\t<html xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" lang=\"en\">\r\n\t  <head>\r\n\t    <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no\"\/>\r\n\t    <meta charset=\"utf-8\"\/>\r\n\t    <title>Directions service<\/title>\r\n\t    <style>\r\n\t      html, body {\r\n\t        height: 100%;\r\n\t        margin: 0;\r\n\t        padding: 0;\r\n\t      }\r\n\t      #map {\r\n\t        height: 100%;\r\n\t      }\t      \r\n\t      #Mybutton{\r\n\t      \tdisplay: none;\r\n\t      }\r\n\t    <\/style>\r\n\t  <\/head>\r\n\t  <body>\r\n\t    <apex:form >\t    \t   \t\r\n\t    \t<apex:inputhidden id=\"start\" value=\"{!startpoint}\" \/>\r\n\t\t\t<apex:inputhidden id=\"end\" value=\"{!endpoint}\"\/> \r\n\t\t\t<button type=\"button\" id=\"Mybutton\">Mybutton<\/button>  \r\n\t    <\/apex:form>\r\n\t    <div id =\"map\"><\/div>\r\n\t    <script>\r\n\t      function initMap() {\r\n\t        var directionsService = new google.maps.DirectionsService;\r\n\t        var directionsDisplay = new google.maps.DirectionsRenderer;\r\n\t        var map = new google.maps.Map(document.getElementById('map'), {\r\n\t          zoom: 7,\r\n\t          center: {lat: 41.85, lng: -87.65}\r\n\t        });\r\n\t        directionsDisplay.setMap(map);\r\n\t\t\tvar st;\r\n\t\t\tvar ed;\r\n\t\t\t$( document ).on(\"click\" ,\" #Mybutton \",function(){\r\n\t\t\t\tst =$(\"[id$='start']\").val();\r\n\t\t\t\ted =$(\"[id$='end']\").val()\r\n\t\t\t\tconsole.log($(\"[id$='start']\").val());\r\n\t\t\t\tcalculateAndDisplayRoute(directionsService, directionsDisplay);\r\n\t\t\t});\r\n\t\t\tif($(\"[id$='start']\").val()!=null && $(\"[id$='start']\").val()!=st && $(\"[id$='end']\").val()!=null && $(\"[id$='end']\").val()!=ed){\r\n\t\t\t\t$(\"#Mybutton\").trigger(\"click\");\r\n\t\t\t}\t       \t\t\r\n\t        \r\n\t      }\r\n\t\r\n\t      function calculateAndDisplayRoute(directionsService, directionsDisplay) {\r\n\t        directionsService.route({\r\n\t          origin: $(\"[id$='start']\").val(),\r\n\t          destination: $(\"[id$='end']\").val(),\r\n\t          travelMode: 'DRIVING'\r\n\t        }, function(response, status) {\r\n\t          if (status === 'OK') {\r\n\t            directionsDisplay.setDirections(response);\r\n\t          } else {\r\n\t            \/\/window.alert('Directions request failed due to ' + status);\r\n\t          }\r\n\t        });\r\n\t      }\r\n\t    <\/script>\r\n\t    <script async=\"true\" defer=\"true\" src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyA50_sS8NAwy7gHeObvhFlozNW3RTxsCG8&callback=initMap\">\r\n\t    <\/script>\r\n\t  <\/body>\r\n\t<\/html>\r\n<\/apex:page>\r\n\r\n<\/pre>\n
The Controller ‘GetRoute’<\/strong> used in the Visualforce Page:<\/p>\n
public with sharing class GetRoute {\r\n\r\n         \/**\r\n         * Webkul Software.\r\n         *\r\n         * @category  Webkul\r\n         * @author    Webkul\r\n         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n         * @license   https:\/\/store.webkul.com\/license.html\r\n         *\/\r\n\r\n\tpublic static string startpoint{get{\r\n\t\tstartpoint = apexpages.currentpage().getparameters().get('startpoint');\r\n\t\treturn startpoint;\r\n\t} set;}\r\n\tpublic static string endpoint{get{\r\n\t\tendpoint = apexpages.currentpage().getparameters().get('endpoint');\r\n\t\treturn endpoint;\r\n\t} set;}\r\n\tpublic void nothing(){}   \r\n}<\/pre>\n
 <\/p>\n
Now we will switch to Lightning Component<\/strong>, here is the code:<\/p>\n
<aura:component implements=\"forceCommunity:availableForAllPageTypes\">\r\n    <!-- \r\n        \/**\r\n         * Webkul Software.\r\n         *\r\n         * @category  Webkul\r\n         * @author    Webkul\r\n         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n         * @license   https:\/\/store.webkul.com\/license.html\r\n         *\/\r\n     -->\r\n    <ltng:require styles=\"{!$Resource.SLDS +\r\n\t         '\/assets\/styles\/salesforce-lightning-design-system-ltng.css'}\"\/>\r\n    <aura:handler name = \"init\" value=\"{!this}\" action=\"{!c.doinit}\"\/>\r\n    <aura:attribute name=\"startPoint\" type=\"String\"\/>\r\n    <aura:attribute name=\"endPoint\" type=\"String\"\/>\r\n\t<aura:attribute name=\"frameSrc\" type=\"String\"\/>    \r\n    <div class=\"wk_static\">\r\n\t\t<div class=\"site-masthead slds-page-header\" role=\"banner\">\r\n            <div class=\" slds-grid slds-wrap\">\r\n                <div class=\"slds-col slds-has-flexi-truncate\">\r\n                  <div class=\"slds-media slds-no-space slds-grow\">\r\n                    <div class=\"slds-media__figure\">\r\n                    <\/div>\r\n                    <div class=\"slds-media__body\">\r\n                      <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>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>        \r\n    \t<div class=\"slds-grid slds-grid--vertical-align-center slds-box slds-theme--shade\">\r\n        \t<div class=\"slds-size--1-of-2 slds-m-around--small\">\r\n                <div class=\"slds-size--1-of-2 setmargin\">\r\n                \t<div class=\"slds-form-element\">       \r\n                        <div class=\"slds-form-element__control\">\r\n                            <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}\">\r\n                                <ui:inputSelectOption text=\"chicago, il\" label=\"Chicago\"\/>\r\n                                <ui:inputSelectOption text=\"st louis, mo\" label=\"St Louis\"\/>\r\n                                <ui:inputSelectOption text=\"joplin, mo\" label=\"Joplin, MO\"\/>\r\n                                <ui:inputSelectOption text=\"oklahoma city, ok\" label=\"Oklahoma City\"\/>\r\n                                <ui:inputSelectOption text=\"amarillo, tx\" label=\"Amarillo\"\/>\r\n                                <ui:inputSelectOption text=\"gallup, nm\" label=\"Gallup, NM\"\/>\r\n                                <ui:inputSelectOption text=\"flagstaff, az\" label=\"Flagstaff, AZ\"\/>\r\n                                <ui:inputSelectOption text=\"winona, az\" label=\"Winona\"\/>\r\n                                <ui:inputSelectOption text=\"kingman, az\" label=\"Kingman\"\/>\r\n                                <ui:inputSelectOption text=\"barstow, ca\" label=\"Barstow\"\/>\r\n                                <ui:inputSelectOption text=\"san bernardino, ca\" label=\"San Bernardino\"\/>\r\n                                <ui:inputSelectOption text=\"los angeles, ca\" label=\"Los Angeles\"\/>\r\n                            <\/ui:inputselect>\r\n                            <ui:inputselect aura:id=\"end\" label=\"End\" class=\"slds-select\"  labelclass=\"slds-form-element__label\" value=\"{!v.endPoint}\" change=\"{!c.GetRoute}\">\r\n                                <ui:inputSelectOption text=\"chicago, il\" label=\"Chicago\"\/>\r\n                                <ui:inputSelectOption text=\"st louis, mo\" label=\"St Louis\"\/>\r\n                                <ui:inputSelectOption text=\"joplin, mo\" label=\"Joplin, MO\"\/>\r\n                                <ui:inputSelectOption text=\"oklahoma city, ok\" label=\"Oklahoma City\"\/>\r\n                                <ui:inputSelectOption text=\"amarillo, tx\" label=\"Amarillo\"\/>\r\n                                <ui:inputSelectOption text=\"gallup, nm\" label=\"Gallup, NM\"\/>\r\n                                <ui:inputSelectOption text=\"flagstaff, az\" label=\"Flagstaff, AZ\"\/>\r\n                                <ui:inputSelectOption text=\"winona, az\" label=\"Winona\"\/>\r\n                                <ui:inputSelectOption text=\"kingman, az\" label=\"Kingman\"\/>\r\n                                <ui:inputSelectOption text=\"barstow, ca\" label=\"Barstow\"\/>\r\n                                <ui:inputSelectOption text=\"san bernardino, ca\" label=\"San Bernardino\"\/>\r\n                                <ui:inputSelectOption text=\"los angeles, ca\" label=\"Los Angeles\"\/>\r\n                            <\/ui:inputselect>\r\n                        <\/div>\r\n                    <\/div>   \r\n                <\/div>\r\n                <div class=\"slds-size--4-of-8\"><\/div>\r\n            <\/div>\r\n            <div class=\"slds-size--1-of-2 slds-m-around--small framediv\">\r\n                <iframe id=\"myFrame\" style=\"height: 100%;width: 100%\" src=\"{!v.frameSrc}\"\/>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/aura:component>\r\n\r\n<\/pre>\n
The Controller<\/strong> of lightning Component:<\/p>\n
({\r\n\r\n        \/**\r\n         * Webkul Software.\r\n         *\r\n         * @category  Webkul\r\n         * @author    Webkul\r\n         * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n         * @license   https:\/\/store.webkul.com\/license.html\r\n         *\/\r\n\tdoinit : function(component, event, helper) {\t\t\r\n\t    component.set(\"v.frameSrc\",'https:\/\/wk-aakanksha-dev-ed--c.ap2.visual.force.com\/apex\/googleMap'); \r\n\t},\r\n    GetRoute: function(component, event, helper){\r\n        var startpoint = component.find(\"start\");\r\n        var sp = startpoint.get(\"v.value\");\r\n        var endpoint = component.find(\"end\");\r\n        var ep = endpoint.get(\"v.value\");\r\n        \r\n        var d = new Date();\r\n\t    var n = d.getTime();\r\n        component.set(\"v.frameSrc\",'https:\/\/wk-aakanksha-dev-ed--c.ap2.visual.force.com\/apex\/googleMap?t='+n+'&startpoint='+sp+'&endpoint='+ep);\r\n    }\r\n})\r\n\r\n<\/pre>\n
Here is related CSS<\/strong>:<\/p>\n
\/**\r\n * Webkul Software.\r\n *\r\n * @category  Webkul\r\n * @author    Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license   https:\/\/store.webkul.com\/license.html\r\n *\/\r\n.THIS .framediv{\r\n    height: 500px;\r\n}\r\n.THIS .site-masthead{\r\n    background-color: #16325c!important;   \r\n}\r\n.THIS .pageTitle{\r\n    color:#ffffff!important;\r\n}\r\n.THIS .setmargin{\r\n    margin: 0 auto;\r\n}\r\n<\/pre>\n
Note<\/strong> : If you want to know how to integrate google map with visualforce visit the following link  How to use google api key in visualforce<\/a><\/div>\n<\/div>\n
\n
\n
Output<\/h3>\n<\/div>\n<\/div>\n
\"using<\/div>\n
 <\/p>\n
\n
\n
<\/i>Support<\/h3>\n<\/div>\n<\/div>\n
\n
That\u2019s all for using google API in lightning component, still have any issue feel free to add a ticket and let us know your views to make the code better  https:\/\/webkul.uvdesk.com\/en\/customer\/create-ticket\/<\/a><\/strong><\/p>\n
Read More: Salesforce REST API Developer Guide<\/a><\/strong><\/p>\n<\/div>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
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 Salesforce …<\/a><\/p>\n","protected":false},"author":6,"featured_media":763,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[84,85,15,1,86],"tags":[97,98],"class_list":["post-802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning-design-system","category-lightning-development","category-salesforce","category-uncategorized","category-visualforce","tag-google-api-in-lightning","tag-using-google-api-in-lightning-component"],"yoast_head":"\nUsing Google API in Lightning Component Salesforce<\/title>\n<meta name=\"description\" content=\"In this blog you will learn,using google API in lightning component with the help of visualforce pages in salesforce.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eshopsync.com\/using-google-api-lightning-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Google API in Lightning Component Salesforce\" \/>\n<meta property=\"og:description\" content=\"In this blog you will learn,using google API in lightning component with the help of visualforce pages in salesforce.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eshopsync.com\/using-google-api-lightning-component\/\" \/>\n<meta property=\"og:site_name\" content=\"eShopSync\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-03T05:52:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-14T10:02:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/09\/lightning-code-snippet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"945\" \/>\n\t<meta property=\"og:image:height\" content=\"356\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Aakanksha Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aakanksha Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/\"},\"author\":{\"name\":\"Aakanksha Singh\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#\\\/schema\\\/person\\\/0c0abdfe9996c433a577308c6e67cd39\"},\"headline\":\"Using Google API in Lightning Component\",\"datePublished\":\"2016-10-03T05:52:22+00:00\",\"dateModified\":\"2025-10-14T10:02:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/\"},\"wordCount\":197,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/eshopsync.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/lightning-code-snippet.png\",\"keywords\":[\"Google API in Lightning\",\"Using Google API in Lightning Component\"],\"articleSection\":{\"0\":\"Lightning Design System\",\"1\":\"Lightning Development\",\"2\":\"Salesforce\",\"4\":\"Visualforce\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/\",\"url\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/\",\"name\":\"Using Google API in Lightning Component Salesforce\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/eshopsync.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/lightning-code-snippet.png\",\"datePublished\":\"2016-10-03T05:52:22+00:00\",\"dateModified\":\"2025-10-14T10:02:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#\\\/schema\\\/person\\\/0c0abdfe9996c433a577308c6e67cd39\"},\"description\":\"In this blog you will learn,using google API in lightning component with the help of visualforce pages in salesforce.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/#primaryimage\",\"url\":\"https:\\\/\\\/eshopsync.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/lightning-code-snippet.png\",\"contentUrl\":\"https:\\\/\\\/eshopsync.com\\\/wp-content\\\/uploads\\\/2016\\\/09\\\/lightning-code-snippet.png\",\"width\":945,\"height\":356},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/using-google-api-lightning-component\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/eshopsync.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Google API in Lightning Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#website\",\"url\":\"https:\\\/\\\/eshopsync.com\\\/\",\"name\":\"eShopSync\",\"description\":\"Salesforce, SAP, Pardot Integration For E-Commerce Store\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/eshopsync.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/eshopsync.com\\\/#\\\/schema\\\/person\\\/0c0abdfe9996c433a577308c6e67cd39\",\"name\":\"Aakanksha Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=mm&r=g\",\"caption\":\"Aakanksha Singh\"},\"url\":\"https:\\\/\\\/eshopsync.com\\\/author\\\/aakanksha-singh391\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Google API in Lightning Component Salesforce","description":"In this blog you will learn,using google API in lightning component with the help of visualforce pages in salesforce.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/","og_locale":"en_US","og_type":"article","og_title":"Using Google API in Lightning Component Salesforce","og_description":"In this blog you will learn,using google API in lightning component with the help of visualforce pages in salesforce.","og_url":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/","og_site_name":"eShopSync","article_published_time":"2016-10-03T05:52:22+00:00","article_modified_time":"2025-10-14T10:02:27+00:00","og_image":[{"width":945,"height":356,"url":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/09\/lightning-code-snippet.png","type":"image\/png"}],"author":"Aakanksha Singh","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Aakanksha Singh","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/#article","isPartOf":{"@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/"},"author":{"name":"Aakanksha Singh","@id":"https:\/\/eshopsync.com\/#\/schema\/person\/0c0abdfe9996c433a577308c6e67cd39"},"headline":"Using Google API in Lightning Component","datePublished":"2016-10-03T05:52:22+00:00","dateModified":"2025-10-14T10:02:27+00:00","mainEntityOfPage":{"@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/"},"wordCount":197,"commentCount":0,"image":{"@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/#primaryimage"},"thumbnailUrl":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/09\/lightning-code-snippet.png","keywords":["Google API in Lightning","Using Google API in Lightning Component"],"articleSection":{"0":"Lightning Design System","1":"Lightning Development","2":"Salesforce","4":"Visualforce"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eshopsync.com\/using-google-api-lightning-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/","url":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/","name":"Using Google API in Lightning Component Salesforce","isPartOf":{"@id":"https:\/\/eshopsync.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/#primaryimage"},"image":{"@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/#primaryimage"},"thumbnailUrl":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/09\/lightning-code-snippet.png","datePublished":"2016-10-03T05:52:22+00:00","dateModified":"2025-10-14T10:02:27+00:00","author":{"@id":"https:\/\/eshopsync.com\/#\/schema\/person\/0c0abdfe9996c433a577308c6e67cd39"},"description":"In this blog you will learn,using google API in lightning component with the help of visualforce pages in salesforce.","breadcrumb":{"@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eshopsync.com\/using-google-api-lightning-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/#primaryimage","url":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/09\/lightning-code-snippet.png","contentUrl":"https:\/\/eshopsync.com\/wp-content\/uploads\/2016\/09\/lightning-code-snippet.png","width":945,"height":356},{"@type":"BreadcrumbList","@id":"https:\/\/eshopsync.com\/using-google-api-lightning-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eshopsync.com\/"},{"@type":"ListItem","position":2,"name":"Using Google API in Lightning Component"}]},{"@type":"WebSite","@id":"https:\/\/eshopsync.com\/#website","url":"https:\/\/eshopsync.com\/","name":"eShopSync","description":"Salesforce, SAP, Pardot Integration For E-Commerce Store","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eshopsync.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/eshopsync.com\/#\/schema\/person\/0c0abdfe9996c433a577308c6e67cd39","name":"Aakanksha Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eef6d7ed23fc4ad8f12c94d6d6d30ec2ebbb9bedbf9d8a9dc8626a3a171fa3fa?s=96&d=mm&r=g","caption":"Aakanksha Singh"},"url":"https:\/\/eshopsync.com\/author\/aakanksha-singh391\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/posts\/802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/comments?post=802"}],"version-history":[{"count":8,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/posts\/802\/revisions"}],"predecessor-version":[{"id":13621,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/posts\/802\/revisions\/13621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/media\/763"}],"wp:attachment":[{"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/media?parent=802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/categories?post=802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eshopsync.com\/wp-json\/wp\/v2\/tags?post=802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}