絞れば、出てくる、アイディア。

【Elementor】Googleマップウィジェットの設定方法と住所がうまく表示されない場合の解決方法

【Elementor】Googleマップウィジェットの設定方法

Googleマップウィジェットは、お店や実店舗のあるビジネスのウェブサイトを作る時にとても便利です。

ElementorのGoogleマップウィジェットの使い方と、たまに発生する「住所がうまく表示されない」トラブルの解決法を紹介します!

1. Googleマップウィジェットの設定方法

Googleマップウィジェットは、Elementorの便利なウィジェットで、住所を指定してその住所中心マップを表示できる機能です。
地図の大きさやスケール(ズームの度合い)、色合いなども調整することができます。

デフォルトの状態はロンドンにある観覧車「ロンドン・アイ」が設定されています。

Elementorの編集画面から、「Googleマップ」をドラッグ&ドロップして表示させたい場所に挿入します。

↑Elementorの編集画面から、「Googleマップ」をドラッグ&ドロップして表示させたい場所に挿入します。

コンテンツの編集画面で「所在地」の箇所に表示させたい住所を入力します。 すると、地図の入力した住所に赤いピンが立ちます。

コンテンツの編集画面「所在地」の箇所に表示させたい住所を入力します。
すると、地図の入力した住所に赤いピンが立ちます。

「ズーム」を変更すると地図の縮尺を調整することができます。

「ズーム」を変更すると地図の縮尺を調整することができます。
ポインタを右に動かし数字を大きくするとズームインでき、逆に動かすとズームアウトできます。

「高さ」を変更すると地図が表示される高さを調整することができます。

「高さ」を変更すると地図が表示される高さを調整することができます。
ポインタを右に動かし数字を大きくすると高くなり、逆に動かすと低くできます。

「スタイル」の編集タブを選択すると、地図の彩度やコントラストなどを調整することができます。 CSS Filtersと表示されているところの右側の鉛筆マークをクリックすると、各項目を調整することが可能です。

「スタイル」の編集タブを選択すると、地図の彩度コントラストなどを調整することができます。
CSS Filtersと表示されているところの右側の鉛筆マークをクリックすると、各項目を調整することが可能です。

例えば、「彩度」を下げて35に設定すると、地図の彩度が落ちて表示されます。

↑例えば、「彩度」を下げて35に設定すると、地図の彩度が落ちて表示されます。
ウェブサイト全体のイメージが落ち着いた印象のサイトでは、彩度を下げることでウェブサイト全体の統一感を図ることもできます。

2. 住所が正しく表示されないときの解決方法

稀に、ElementorのGoogleマップウィジェットで、入力した住所にピンが立たない場合(住所が正しく表示されない場合)があります。
その場合の解決方法を紹介します!

まず初めに、表示させたい住所の箇所を通常のGoogleマップで検索します。 そして、地図上の赤いピンの上で右クリックします。

↑まず初めに、表示させたい住所の箇所を通常のGoogleマップで検索します。

そして、地図上の赤いピンの上で右クリックします。

↑そして、一番上に表示されている番号をコピーします。(クリックするだけでクリップボードにコピーされます)

コピーした番号Googleマップウィジェット「所在地」に貼り付けます。
これで住所が正しく表示されるはずです。

《まとめ》

今回の記事では、ElementorのGoogleマップウィジェットの設定方法と、住所が正しく表示されないときの解決方法を紹介しました。

実際にお店があるブランドやビジネスのウェブサイトではマップの掲載はとても大切です。
ぜひ、Elementorを使用してウェブサイトを作成している方は、Googleマップウィジェットを使ってみてください。

また、住所が上手く表示されずに悩んでいる方がいましたら、この解決方法が参考になれば幸いです😆