2020.06.15

Salesforceで地図を表示しよう!(GoogleMapsAPI編)

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

はじめに

前回の記事「Salesforceで地図を表示しよう!(lightning:mapコンポーネント編)」では、lightning:mapコンポーネントを使ってGoogleマップを表示しました。

lightning:mapコンポーネントは容易にGoogleマップを表示することが可能ですが、カスタマイズする場合にGoogleMapsAPIでしかサポートされていない機能があります。
lightning:mapコンポーネントとGoogleMapsAPIの比較
lightning:mapコンポーネント GoogleMapsAPI
料金 無料 従量課金制(毎月 $200 分は無料)
機能 住所から最大10件、緯度・経度から最大100件までマーカーの表示が可能。 住所からマーカー表示は不可能 。緯度・経度から100件を超えるマーカー表示が可能。lightning:mapでは扱えない機能やイベントが用意されている。

※GoogleMapsAPIで扱える機能の詳細についてはリファレンス参照

今回はSalesforceとGoogleMapsAPIを組み合わせ、標準とは異なるマーカーの地図を表示してみましょう。また、マーカーをクリックした際には、左上の取引先名がマーカーのタイトルと連動する処理を入れます。

実装の流れ

実装までの主な流れは次の通りです。

  1. GoogleCloudPlatformのプロジェクト作成
  2. APIの有効化
  3. APIキーの発行
  4. インテグレーションルールの有効化(緯度経度データの準備)
  5. 実装

1. GoogleCloudPlatformのプロジェクト作成

GoogleCloud Platformの[プロジェクトの選択]から、[新しいプロジェクト]を作成します。

※プロジェクトの作成にはGoogleアカウントにログインしている必要があります。

2. APIの有効化

メニューの[APIとサービス] > [ダッシュボード]を選択し、[APIとサービス]を開きます。

[+APIとサービスを有効化]から、[APIライブラリ]を開きます。

[Maps JavaScript API]を選択し、有効にします。

3. APIキーの発行

メニューの[APIとサービス] > [認証情報]を選択し、[認証情報]を開きます。

認証情報の[+認証情報を作成] > [APIキー]を選択するとAPIキーが作成できます。
※このAPIキーを後述の実装で使用します。

※[キーを制限]からAPIキーの使用に制限を掛けることを推奨しますが、当ブログでは説明を割愛します。
以上でGoogleAPI側の準備は完了です。

4. インテグレーションルールの有効化(緯度経度データの準備)

次にSalesforce側の設定を行います。

GoogleMapsAPIでは地図とマーカーの指定に緯度経度情報が必要となります。
ここでは動作検証のため、データインテグレーションルールを有効化して取引先オブジェクトの緯度経度情報を設定します。
今回は、取引先の請求先住所の緯度経度を設定するため、[Geocodes for Account Billing Address]を有効化します。

緯度経度が正しく反映されない場合は、住所(請求先)がすべて入力されていることを確認してください。
※日本の場合、国(請求先)の項目には"日本"ではなく"JP"と入力する必要があります。

5. 実装

Visualforceページ

<apex:page controller="GoogleMapExampleController" lightningStylesheets="true">
    <script type="text/javascript" async="true" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
    <script>
    var currentInfoWindow = null;
    
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true
        });
        var accounts =  JSON.parse('{!JSENCODE(jsonAccounts)}');
        for(var i in accounts){
            createMarker(map, accounts[i]);
        }
    }
    
    function createMarker(map, acc){
            var latlng = new google.maps.LatLng(acc.BillingLatitude, acc.BillingLongitude);

            map.setCenter(latlng);

            var marker = new google.maps.Marker({
                position: latlng, 
                map: map, 
                icon: 'http://maps.google.com/mapfiles/ms/micons/red-pushpin.png',
                title: acc.Name
            });
            
            var infowindow = new google.maps.InfoWindow({
                content: acc.Name,
                size: new google.maps.Size(200,30)
            });
            
            google.maps.event.addListener(marker, 'click', function() {
                if (currentInfoWindow) {
                    currentInfoWindow.close();
                }           
                infowindow.open(map, marker);
                currentInfoWindow = infowindow;
                map.panTo(latlng);
                selectMarker(acc.Id);
            });
    }
    </script> 
    <h1>Select Account</h1>
        <apex:form >
        <apex:actionFunction name="selectMarker" action="{!selectMarker}" rerender="accountName">
            <apex:param name="id" value="" assignTo="{!selectedAccoutId}"/>
        </apex:actionFunction>
            
        <apex:outputField id="accountName" label="取引先:" value="{!selectedAccout.name}"/>
        <div id="map" style="height:500px;" />
    </apex:form>
</apex:page>
GoogleMapExample.vfp
scriptタブの"API_KEY"の部分に前述で発行したAPIキーを指定します。

Visualforceページでは地図の定義と初期化を行っています。

initMap() ではコントローラから取引先(JSON形式)を取得して地図を初期化しています。

createMarker() では取引先1件ごとのマーカーを設定する処理を行っています。

コントローラ

public class GoogleMapExampleController {
    private Map<Id, Account> accounts {get;set;}
    
    public Id selectedAccoutId {get;set;}
    
    public Account selectedAccout {get;set;}

    public GoogleMapExampleController() {
        this.accounts = new Map<Id, Account>([SELECT Id, Name, BillingLatitude, BillingLongitude FROM Account]);
    }
    
    public String getJsonAccounts(){
        return JSON.serialize(this.accounts.values());
    }
    
    public void selectMarker(){
        if(this.accounts.containsKey(this.selectedAccoutId)){
            this.selectedAccout = this.accounts.get(this.selectedAccoutId);
        }
    }
}
GoogleMapExampleController.apxc

コントローラでは取引先の緯度経度情報を取得しています。

getJsonAccounts()は、取引先をJSON形式にしてVisualforceページ側へ渡します。

selectMarker()は、マーカークリック時のアクションを定義します。

作成結果

完成した地図は次のように表示されます。

標準とは異なるマーカーが表示され、クリックすると左上の取引先名が変わる地図ができあがります。

もし地図が表示されない場合、次の内容を確認してみてください。

  • APIは有効化されており、キーの制限などは設定されていないか
  • 緯度経度情報が取得できており、マーカーに設定できているか

おわりに

最後までお読みいただき、ありがとうございます。

2回に渡って地図を表示する機能について、lightning:mapコンポーネントとGoogleMapsAPIを紹介させていただきました。それぞれメリット、デメリットがありますので状況に応じて使い分けていただければと思います。
53 件
     
  • banner
  • banner

関連する記事