AURAサンプル（gooleマップ表示例）

作成者：SUMKING＠李
この投稿は私個人の練習メモです。 ご利用は自己責任でお願いいたします。

aura

<!--
  @description       : mapDemo
  @author            : sumking＠李
  @last modified on  : 05-24-2022
-->
<aura:component     
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" 
                access="global"
                controller="LightningMapExampleController" >
    <aura:attribute name="mapMarkers" type="Object"/>
    <aura:attribute name="selectedMarkerValue" type="String" />
    <aura:attribute name="name" type="String" />

    <aura:handler name="init" value="{! this }" action="{! c.init }"/>

    <div class="c-container">
        <lightning:layout>
            <lightning:layoutItem flexibility="auto, no-grow" padding="around-small">
                <div class="custom-box">
                  <lightning:input name="lastname" required="true" value="{! v.name}"/>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <div class="custom-box" style="padding-top: 2.5%">
                  <lightning:button label="検索" title="Neutral action" onclick="{! c.readData }"/>
                  <lightning:button label="戻る" title="Neutral action" onclick="{! c.init }"/>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
      </div>

    <div class="slds-box slds-theme--default">
        <lightning:map 
                       mapMarkers="{! v.mapMarkers }"
                       selectedMarkerValue="{!v.selectedMarkerValue}"
                       markersTitle="account list"
                       listView="auto"
                       showFooter="false"
                       onmarkerselect="{!c.handlerMarkerSelect}" />
    </div>
    
</aura:component>

({
    init: function (cmp, event, helper) {
        
        var action = cmp.get("c.getAccounts");
        cmp.set('v.mapMarkers', [{location: {}}]);

        action.setCallback(this, function(response){
            
            var accounts = response.getReturnValue();
            var markers = [];
            console.log("accounts.length==="+accounts.length);
            for(var i = 0; i < accounts.length; i++){
                var acc = accounts[i];
                markers.push({
                    location: {
                        Country : acc.BillingCountry,
                        State : acc.BillingState,
                        City: acc.BillingCity,
                        Street: acc.BillingStreet
                    },
    
                    icon : "standard:account",
                    value: acc.Id,
                    title: acc.Name,
                    description: acc.Description
                });
            }
            console.log("markers.length.length==="+markers.length);
            if(markers.length != 0){
                cmp.set('v.mapMarkers', markers);
            }
        });

        $A.enqueueAction(action);
    },

    handlerMarkerSelect: function (cmp, event, helper) {
        console.log(event.getParam("selectedMarkerValue"));
    },
    readData : function(component, event, helper) {
        //画面側に入力した内容を取得します
        console.log("name===");
        var name = component.get("v.name");

        var action = component.get("c.getAccount");
        action.setParams({ 
            "Name" : name 
        });
        action.setCallback(this, $A.getCallback(function (response) {
            var state = response.getState();
            if (state ==="SUCCESS") {
                var accounts = response.getReturnValue();
                var markers = [];
                console.log("v.accounts.length===="+accounts.length);
                for(var i = 0; i < accounts.length; i++){
                    var acc = accounts[i];
                    markers.push({
                        location: {
                            Country : acc.BillingCountry,
                            State : acc.BillingState,
                            City: acc.BillingCity,
                            Street: acc.BillingStreet
                        },
        
                        icon : "standard:account",
                        value: acc.Id,
                        title: acc.Name,
                        description: acc.Description
                    });
                }
                console.log("v.mapMarkers===="+markers);
                if(markers.length != 0){
                    component.set('v.mapMarkers', markers);
                }
            } else if (state === "ERROR") {
                var errors = response.getError();
                console.error(errors);
            }
        }
        ));
        $A.enqueueAction(action);
    }
});

Apex

/***********************************************
 * @descrption       : google画面のAPEX例です
 * @author            : sumking@李
 * @last modified on  : 05-24-2022
************************************************/
public class LightningMapExampleController {
    @AuraEnabled
    public static List<Account> getAccounts(){
        return [SELECT Id, Name, BillingCountry, BillingState, BillingCity, BillingStreet, Description 
                FROM Account 
                WHERE BillingCity != NULL AND BillingStreet != NULL LIMIT 10];
    }
    @AuraEnabled
    public static List<Account> getAccount(String Name){
        System.debug('Name===='+Name);
        return [SELECT Id, Name, BillingCountry, BillingState, BillingCity, BillingStreet, Description 
                FROM Account 
                WHERE BillingCity != NULL AND BillingStreet != NULL AND Name=:Name];
    }
}

株式会社SUMKING（サムキン）
〒113-0034東京都文京区湯島2丁目4-1 TOURYUお茶の水ビル 201
ホーム：https://sumking.co.jp/