簡単に、lightning:mapを使ってみました。

取引先の詳細ページに表示できるようにします。

component

<aura:component controller="AccountMap" implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
    <!-- ************************************************* -->
    <!-- 取引先の地図を表示する                              -->
    <!--  K.Otsubo 2021/02/09                              -->
    <!--                                                   -->
    <!-- ************************************************* -->
    
    <aura:attribute name="recordId" type="String" /> <!-- Account -->
    <aura:attribute name="message" type="String" />
    <aura:attribute name="mapMarkers" type="Object"/>
    <aura:attribute name="zoomLevel" type="Integer" />
    
    <!-- 画面ロード時のイベントがあればここに書く          -->  
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
     <div class="slds-box slds-box_xx-small slds-text-align_left slds-m-around_xx-small slds-theme_default">
        <lightning:layout verticalAlign="center" multipleRows="true">
            
            {!v.message}
            <lightning:map 
                           mapMarkers="{! v.mapMarkers }" 
                           zoomLevel="{!v.zoomLevel}" />
            
            
         </lightning:layout>
    </div>
	
</aura:component>

({
	init: function (component, event, helper) {
        var recordId = component.get("v.recordId");
        var action = component.get("c.getAccount");
        action.setParams({"accId" :recordId});
        action.setCallback(this, function(response){            
            if (action.getState() == "SUCCESS") {    
                var myAcc = response.getReturnValue();
               
                component.set('v.mapMarkers', [
                    {
                        location: {
                            Street: myAcc.BillingStreet,
                            City: myAcc.BillingCity,
                            State: myAcc.BillingState
                        },
                        
                        title: myAcc.Name,
                        description: ''
                    }
                ]);
                component.set('v.zoomLevel', 16);
                
            }  else if (action.getState() == "ERROR" ) {
                var errors = response.getError();                
                if (errors[0] && errors[0].message) {
                    // サーバーサイドでcatchできなかったパターン
                    component.set("v.message", errors[0].message);
                } 
            }
        });
        $A.enqueueAction(action);   
        
    },
})

Apex class

public with sharing class AccountMap {
	// *************************************************
    // 取引先の地図を表示する                       
    // K.Otsubo 2021/02/09
    // *************************************************
    
    
    @AuraEnabled
    public static Account getAccount(String accId) {
        Account RetAcc = new Account();
        if (String.isEmpty(accId)) return RetAcc;
        if (accId == 'undefined') return RetAcc;
        
		List<Account> myList = [select Id,Name,BillingCountry,BillingPostalCode,BillingState,BillingCity,BillingStreet From Account where Id=: accId];
        
        if (myList.size() > 0) {
            RetAcc = myList[0];//1件だけ
        }        
        
        return RetAcc;
    }
    
}

その他

マップの高度なデータインポート権限

lightning:mapを使ってみる

関連する資料

その他