Googleマップ

つい最近起こったことですが、サイトにGoogleマップを実装するケースで、Googleマップが実装できなかった不具合が発生していました。Elementorの「Googleマップ」ウジェットで、マップを実装するのが一般的な方法なのですが、それが出来ないケースが発生しています。

想定される原因として、Elementorとサーバーの相性みたいな事象が起こっています。そのエラーメッセージは「サーバーエラー(403 Forbidden)」と表示されるケースです。

その不具合でのGooleマップの実装は、「Googleマップ」ウジェットでの実装を辞めて、「XTML」ウジェットでの実装に切り替えることで、解決する場合があります。

即ち、Googleマップの実装には、以下の2通りの実装方法があることを、頭の片隅に置いておいて下さい。
①「Googleマップ」ウジェットによる実装
②「XTML」ウジェットによる実装

事例1:Googleマップウジェットによる実装例

地図の一例として「JR柏駅」近辺の地図を作成してみます。

①Elementoreウジェットの「Googleマップ」を選択する(上図左)
②所在地欄に「JR柏駅」と入力して更新ボタンを押下する(上図右)
③その結果、コンテンツ本体部分にGoogleマップが表示される(下図)

事例2:「XTML」ウジェットによる実装例

前記のElementoreウジェットの「Googleマップ」で地図が取得できない場合、以降の処理でGoogleマップを作成する手順があることを紹介します。

①GoogleアプリのGoogle地図画面を開いて「JR柏駅」と入力(上図左)
②Google地図メニューの「共有」をクリックする(上図右)
③共有メニューの「地図を埋め込む」をクリックする(下図左)
④最後に「HTMLをコピー」をクリックする(下図右)

ここからElementorを起動して・・・・

先ず、Elementorの「一般」ウジェットにある「HTML」ウジェットを、コンテンツ本文領域にドラッグ&ドロップで挿入する。(左図)

生成された「HTMLを編集」ウジェットのHTMLコード欄に前記で取得したHTMLコードを挿入する(下図)

その結果、HTMLウジェットによる地図が表示