Google地図を表示するElementor事例２題
つい最近起こったことですが、サイトにGoogleマップを実装するケースで、Googleマップが実装できなかった不具合が発生していました。Elementorの「Googleマップ」ウジェットで、マップを実装するのが一般的な方法なのですが、それが出来ないケースが発生しています。
想定される原因として、Elementorとサーバーの相性みたいな事象が起こっています。そのエラーメッセージは「サーバーエラー（403 Forbidden）」と表示されるケースです。
その不具合でのGooleマップの実装は、「Googleマップ」ウジェットでの実装を辞めて、「XTML」ウジェットでの実装に切り替えることで、解決する場合があります。
即ち、Googleマップの実装には、以下の２通りの実装方法があることを、頭の片隅に置いておいて下さい。
①「Googleマップ」ウジェットによる実装
②「XTML」ウジェットによる実装
事例１：Googleマップウジェットによる実装例
地図の一例として「ＪＲ柏駅」近辺の地図を作成してみます。
①Elementoreウジェットの「Googleマップ」を選択する（上図左）
②所在地欄に「JR柏駅」と入力して更新ボタンを押下する（上図右）
③その結果、コンテンツ本体部分にGoogleマップが表示される（下図）
事例２：「XTML」ウジェットによる実装例
前記のElementoreウジェットの「Googleマップ」で地図が取得できない場合、以降の処理でGoogleマップを作成する手順があることを紹介します。
①GoogleアプリのGoogle地図画面を開いて「JR柏駅」と入力（上図左）
②Google地図メニューの「共有」をクリックする（上図右）
③共有メニューの「地図を埋め込む」をクリックする（下図左）
④最後に「HTMLをコピー」をクリックする（下図右）
ここからElementorを起動して・・・・
先ず、Elementorの「一般」ウジェットにある「HTML」ウジェットを、コンテンツ本文領域にドラッグ＆ドロップで挿入する。（左図）
生成された「HTMLを編集」ウジェットのHTMLコード欄に前記で取得したHTMLコードを挿入する（下図）
