【Lightning Web Component】GoogleMapAPIを使って地図を表示させる①

Developer

2020.07.14 2020.05.19

この記事は約3分で読めます。

こんにちは、アンダーソンです。
今回はGoogleMapAPIを使って地図を表示させてみました。
参考にさせていただいた記事なども紹介していきます。

Contents

1 iframeを使う
2 まとめ
3 参考にさせていただいた記事

iframeを使う

LWCでは外部リソースを読み込めないようなので、（Auraと同じ）
VF画面でGoogleMapを表示させ、LWC側ではiframeを使ってVFを表示させます。

<div id="map"></div>   

    <script>
    const lexHost = "yourdomein.lightning.force.com";
    let map;
    let latitude = {!Latitude};
    let longitude = {!Longitude};
    window.onload = function onLoaded() {
        map = new google.maps.Map(document.getElementById("map"), {
            center: {lat: latitude ,lng:longitude},
            zoom: 15
        });
        const marker = new google.maps.Marker({
            position: {lat: latitude ,lng:longitude}
        });
        marker.setMap(map);
    }   
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=yourKey" />

これをLWC側で表示させます。

<template>
    <div class="slds-m-around_medium">
        <iframe class="vfFrame" width="100%" height="400" src="/apex/GoogleMap"></iframe>
    </div>
</template>

これでOKです。
初期表示としてApexクラスを用意しておきました。

public with sharing class GoogleMapApiController {
    
    public String Latitude {get;set;}
    public String Longitude {get;set;}

    public GoogleMapApiController(){
        this.Latitude = '35.6684415';
        this.Longitude = '139.6007843';
    }
}

実はLWC読み込み時にアカウント情報を読み込んでそのMapを表示させるというのを
実装しようとしてたんですが、まだできずでとりあえずMapを表示させることからまずやってみました。

まとめ

今回はGoogleMapAPIを使ってLWCでGoogleMapを表示させてみました。
LWCにはLightningMapというコンポーネントがありますが、自由度を考えるとAPIを使って変更させるののがやはりいいかと思います。
まず第一段として表示の仕方をまとめてみました。これから経路表示とかいろいろやっていきたいと思います。