こんにちは、アンダーソンです。
今回はGoogleMapAPIを使って地図を表示させてみた第二段です。
iframe内へのデータの渡し方をまとめました。
postMessageを使いましょう
前回に引き続きGoogleMapを表示させるにはLWCではiframeを使ってVF画面を表示させています。
ではLWCで発生したイベントをiframe内のVFに送るにはどうするのがいいのでしょうか。
ただ気をつけないといけないのがLightningとVFではドメイン（オリジン）が違うので
postMessageでイベントを送信し、VF側でその内容を受け取ります。
change(){
this.param = {
type : "INIT",
center : { lat: this.accounts.data.Field1__Latitude__s, lng: this.accounts.data.Field1__Longitude__s },
zoom: 15
}
this.contentWindow = this.template.querySelector('iframe').contentWindow;
this.contentWindow.postMessage(this.param,VFHOST);
}これでOKです。あらかじめaccountsにはApexメソッドを呼び出して値を入れてますので、Map表示の形で緯度経度を放り込んでおけばOKです。
Auraと違うのがコンポーネントの取得のしかたで、
.find()でOKだったものがthis.template.querySelector()になっていますのでご注意です。
余談ですが、このthis.template.querySelector()ですが、取得できるタイミングにも気をつけましょう。
connectedCallbackでは取得できず、DOMの生成が終わったrenderedCallback内では取得できます（当たり前か。。。）
イベントを受け取る
次にpostされたイベントをVF側で受け取ります。
window.addEventListener("message", function(event) {
console.log('addEventListener');
if (event.origin === "https://" + lexHost) {
if (event.data.type === "INIT") {
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);
}
}
}, false); 受け取ったオリジンを判定してmapに格納しています。
これでOKです。
正直こちらはそこまで難しいことはしてないかなと思います。
ただ意味がわからない方はぜひこちらのお勉強サイトがおすすめです。
さてでは実際にみてみましょう。
今回はpostMessage後にちゃんとイベントリスナーが動いているかをみてます。
（リスナー内にログ貼っただけ）
こんな感じでうまく表示を変更できました。
まとめ
今回はiframeに対してのイベントの送信でGoogleMapを切り替えてみました。
SalesforceというかJavaScriptの使い方みたいになってしまいましたが。。。
LWCでも問題なくこんなことができるんだというのを知っていただければ嬉しいです。
その他の開発に関する記事はこちらです。
Developerも含めた試験問題にチャレンジしてみましょう。
コメント