We shall begin with the attributes used in lightning:map component, which are listed below:<\/p>\n
- \n
- class<\/strong> \u2013 It is a CSS class for the outer element, in addition to the component’s base classes.<\/li>\n
- title<\/strong> \u2013 It displays us tooltip text on mouse hovers the element.<\/li>\n
- zoomLevel<\/strong> \u2013 It denotes the zoom levels corresponding with Google Maps API. If it is not specified, the map component automatically defines it according to the screen.<\/li>\n
- mapMarkers(Required)<\/strong> \u2013 It defines an array of objects with address\/coordinates to be displayed on the map.<\/li>\n
- markersTitle<\/strong> \u2013 It provides the heading title for the markers when the map has multiple markers. The title is displayed as a header for the list of clickable addresses.<\/li>\n
- center<\/strong> \u2013 It defines the center location for a map, if not defined it is automatically adjusted.<\/li>\n
- showFooter<\/strong> \u2013 A link is displayed ‘Open in Google Maps’ in the footer which can open a window externally with the markers in the map.<\/li>\n
- listView<\/strong> \u2013 It displays or hides the list of locations.<\/li>\n<\/ul>\n
Also Read: How to Create and Use Salesforce Surveys<\/a><\/h4>\n
<\/span>Let\u2019s understand with given below example<\/span><\/h2>\n
Here is what we are trying to as example, we will display the location of Account through the defined billing address. So here is the code:<\/p>\n
<\/span>Apex Controller:<\/span><\/h2>\n
public with sharing class AccountMapController {
\n@AuraEnabled
\npublic static Account getAccountLocation(string accountId){
\nreturn [Select Id,Name,Website,BillingStreet,BillingCity,BillingState from Account where Id =: accountId];
\n}
\n}
\n<\/code>
\n![\"hire](\"\/blog\/wp-content\/uploads\/sites\/2\/2020\/05\/hire-salesforce-developers.png\")
<\/a><\/p>\n<\/span>Lightning Component:<\/span><\/h2>\n
<aura:component implements=\"flexipage:availableForRecordHome,force:hasRecordId\"
\naccess=\"global\" controller=\"AccountMapController\"\/>
\n<!-- attributes -->
\n<aura:attribute name=\"accountLocation\" type=\"Object\"\/>
\n<aura:attribute name=\"zoom\" type=\"Integer\" \/>
\n<aura:attribute name=\"recordId\" type=\"String\" \/><\/code><\/p>\n<!– handlers–>
\n<aura:handler name=”init” value=”{! this }” action=”{!c.initialize }”\/><\/p>\n<!– the map component –>
\n<aura:if isTrue=”{!v.accountLocation.length > 0}” >
\n<lightning:map mapMarkers=”{! v.accountLocation }” zoomLevel=”{!v.zoomLevel}” \/>
\n<\/aura:if>
\n<\/aura:component><\/p>\nLearn More: Benefits of Salesforce Commerce Cloud Implementation<\/a><\/h4>\n
<\/span>Lightning Component Controller:<\/span><\/h2>\n
\n({
\ninitialize : function(component, event, helper) {
\nvar recordId = component.get('v.recordId');
\nvar action = component.get('c.getAccountLocation');
\naction.setParams({
\n'accountId' : recordId
\n});
\naction.setCallback(this,function(res){
\nvar state = res.getState();
\nif(state==='SUCCESS'){
\nconsole.log(res.getReturnValue());
\nvar acc = res.getReturnValue();
\ncomponent.set('v.accountLocation', [
\n{
\nlocation: {
\nStreet: acc.BillingStreet,
\nCity: acc.BillingCity,
\nState: acc.BillingState
\n},
\ntitle: acc.Name,
\ndescription: acc.Website
\n}
\n]);
\ncomponent.set('v.zoom', 16);
\n}
\n});
\n$A.enqueueAction(action);
\n}
\n})
\n<\/code><\/p>\n<\/span>Output<\/span><\/h2>\n
![\"lightning](\"\/blog\/wp-content\/uploads\/sites\/2\/2020\/04\/lightning-component-output-1024x323.png\")
\nWe at Emizentech are adept at providing salesforce development services<\/a> for various salesforce products and modules. If you a have a project related to it then get in touch with us as we are a reputed and experienced Salesforce consulting company<\/a>.<\/p>\nAlso Read: Magento Commerce Cloud Vs Salesforce Commerce Cloud<\/a><\/h4>\n","protected":false},"excerpt":{"rendered":"
We have all tried to integrate different map APIs in salesforce, most popular being Google Map API. Although we have done a spectacular job while using it, how about using inbuilt functionality that Salesforce provides us with. Let us proceed with Lightning Map Component and how we can put it to our use. Lightning Map<\/p>\n","protected":false},"author":38,"featured_media":2226,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[87],"tags":[],"class_list":{"0":"post-1894","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-salesforce-development"},"modified_by":"emizentech","featured_image_src":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/04\/create-salesforce-lightning-map-component-1.png","featured_image_src_square":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-content\/uploads\/sites\/2\/2020\/04\/create-salesforce-lightning-map-component-1.png","author_info":{"display_name":"Sapna Chandani","author_link":"https:\/\/multisitelocal.ezxdemo.com\/blog\/author\/sapna-chandani"},"_links":{"self":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/1894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/comments?post=1894"}],"version-history":[{"count":0,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/posts\/1894\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media\/2226"}],"wp:attachment":[{"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/media?parent=1894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/categories?post=1894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisitelocal.ezxdemo.com\/blog\/wp-json\/wp\/v2\/tags?post=1894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- title<\/strong> \u2013 It displays us tooltip text on mouse hovers the element.<\/li>\n