こんにちは、アンダーソンです。
今回はGoogleMapAPIを使って地図を表示させてみました。
参考にさせていただいた記事なども紹介していきます。
Contents
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を使って変更させるののがやはりいいかと思います。
まず第一段として表示の仕方をまとめてみました。これから経路表示とかいろいろやっていきたいと思います。