2020.06.09

Salesforceで地図を表示しよう!(lightning:mapコンポーネント編)

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
gettyimages (16185)

はじめに

SalesforceにはGoogleマップを表示するlightning:mapコンポーネントが標準で用意されています。
lightning:mapコンポーネントを使うことで簡単に地図を表示することが可能ですが、できること/できないことがあります。

そこで当ブログでは

  • lightning:mapコンポーネント編
  • Google Maps API編

の2回にわたって、Salesforceに地図を表示する方法を紹介します。

今回は、lightning:mapコンポーネントを使って、次のような地図を表示する画面を作成します。

サンプルイメージ

サンプルソース

作成するソースコードは次の3つです。
  • Component
  • Component Controller
  • Apex Class

Component

Componentでは、<lightning:map>タグで地図の属性を指定します。
<aura:component controller="LightningMapExampleController" implements="force:appHostable">
    <aura:attribute name="mapMarkers" type="Object"/>
    <aura:attribute name="selectedMarkerValue" type="String" />
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <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>
LightningMapExample.cmp
<lightning:map>タグで使用できる属性は次の通りです。
属性 内容
mapMarkers プロットするマーカーの配列。
markersTitle マップリストのタイトル。
listView マップリストの表示:visible/非表示:hidden/自動:auto。
showFooter フッター部の表示:true/非表示:false。
selectedMarkerValue 選択しているマーカーの値。
onmarkerselect マーカー選択時のアクション。
center マップの中心位置。
zoomLevel マップのズームレベル。デスクトップ:1~22、モバイル:1~20をサポート。

Component Controller

Compponent Controllerでは、マーカーの属性を指定します。
({
    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 = [];
            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
                });
            }
            
            if(markers.length != 0){
                cmp.set('v.mapMarkers', markers);
            }
        });

        $A.enqueueAction(action);
    },

    handlerMarkerSelect: function (cmp, event, helper) {
        console.log(event.getParam("selectedMarkerValue"));
    }
});
LightningMapExampleController.js

init: functionでマーカー(mapMarkers)を設定する処理を行います。 サンプルソースでは、Apex Classから取得した取引先レコードのマーカーを作成しています。

※注:5行目のcmp.set('v.mapMarkers', [{location: {}}]);によってマーカーの初期値を設定しています。この記述によって表示するマーカーがない場合に、地図が表示されなくなることを防ぎます。

handlerMarkerSelect: functionではマーカークリック時のアクションを定義します。
このサンプルでは、選択したマーカーの値をログ出力しています。
マーカー(mapMarkers)の設定で使用できる属性は次の通りです。
属性 内容
icon マップリストに表示するアイコン。
location マーカーの位置情報。緯度経度(Latitude、Longitude)のセットまたは、住所(Country、PostalCode、Country、State、City、Street)のセットを指定する。Streetを指定する場合、Country、PostalCode、Country、State、Cityの1つ以上を合わせて指定する必要がある。
title マーカークリック時に表示される吹き出しのタイトル。
description マーカークリック時に表示される吹き出しの内容。
value マーカーの値。マーカークリック時にlightning:mapのselectedMarkerValueに設定される。

※icon属性には、Lightning Design Systemのアイコンのみ使用可能

Apex Class

Apex Classではマーカーに表示する取引先10件の情報を取得します。
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];
    }
}
LightningMapExampleController.apex
試しにクエリのLIMITを11とした場合、取得データが11件でもマップに表示されるマーカーは10件です。これは、lightning:mapでは最大10件の住所しかジオコーディングされないからです。
ジオコーディングを行わない(locationを緯度経度で指定した)場合、マーカーは最大100件まで表示することができます。
※ジオコーディングの件数には、lightning:mapのcenter属性も含まれます。
例えば、マップの中心地点に住所を指定した場合、マーカーに住所を指定できるのは最大9個までとなります。

作成結果

次のように地図が表示されていれば作成完了です。

lightning:mapコンポーネントを利用すると簡単に複数マーカーを立てた地図と、マーカーの一覧を表示する画面を作成することができます。
マーカーの一覧にはマーカー名と住所が記載されますが、住所は以下のように「町名・番地、市区郡、都道府県」の形式で表示されてしまいます。

これを「都道府県 市区郡 町名・番地」の形式で表示するためには、以下のように緯度経度と合わせて町名・番地を指定します。町名・番地には、住所に表示したい都道府県+市区郡+町名・番地を設定します。
※公式でサポートされている指定方法ではないため、使用する際はご注意ください。
location: {
 Latitude : acc.BillingLatitude,
 Longitude : acc.BillingLongitude,
 Street: acc.BillingState + acc.BillingCity + acc.BillingStreet
},
緯度経度と町名・番地を指定する場合の例
緯度経度と町名・番地を指定すると、マーカーの位置は緯度経度が使用され、住所の名称は町名・番地に設定した文字が使用され以下のように表示されます。

おわりに

最後にlightning:mapコンポーネントでできること/できないことをまとめます。

できること

  • 住所からマーカーを表示(最大10件)
  • 緯度経度からマーカーを表示(最大100件)
  • マーカーのリスト表示
  • onmarkerselectのイベント処理

できないこと

  • 100件を超えるマーカーの表示
  • マーカーアイコンの変更
  • onmarkerselect以外のイベント処理
次回は、lightning:mapコンポーネントでできないことの対応方法としてGoogleMapsAPIをSalesforceで使用する例を紹介したいと思います。
40 件
     
  • banner
  • banner

関連する記事