Google Mapのiframeを使い、地図を綺麗に表示させる為に必要なこと

Google Mapの地図を使いたいニーズはたくさんあるけど。

 

WordPressを使ったコーポレートサイト制作の場合にはアクセスマップは必須と言われますね。アクセスマップはイラスト画像を使う場合とGoogle Mapを埋め込む2つが現在の主流。

アパレルや美容院、サロンなどの店舗サイトの場合にはサイト全体のデザイン・雰囲気を壊さない為に、イラスト画像を貼り付けている場合あるが、やはり地図情報が都度更新されるGoogle Mapを埋め込みたいというニーズは多いように思われるし、事実、企業のコーポレートサイトの場合にはGoogle Mapの採用されている方が多数派です。

そのGoogle Mapを埋め込む手順は、iframeのコードを埋め込むことになるがこれが簡単そうで意外に奥深い。(私が知らなかっただけかもしれないが・・・)

※iframeのコードの埋め込み以外にWordPressのプラグイン「Simple Map」を使うという選択肢もあるが今回は触れません。

iframeでGoogle Mapを埋め込むと不便なところ

 

まず、iframeを使ってGoogle Mapを埋め込む方法をお知りになりたい方は以下の情報を参考にしてください。

◾️【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法
https://inthecom.net/718

 

私が感じる不便なところ

1.スマホやタブレット端末で閲覧すると、指のスクロール操作で意図せずGoogle Mapが動いてしまう。

 

これはサイト閲覧者のイライラの原因になっていたのですが、Googleの仕様変更があり、現在は解消されています。
詳細については以下のページもご参考にしてみてください。

◾️あのイライラが解消、「Googleマップ」で嬉しい仕様変更
http://appllio.com/google-maps-embedded-two-fingers-touch-scroll

 

2.吹き出しの住所情報が重複してしまう。または間違っている。

 

例えば、以下の例で説明します。
あべのハルカスの住所は「〒545-6016 大阪府大阪市阿倍野区阿倍野筋1丁目1−43」です。
この住所情報を元にiframeでGoogle Mapを埋め込むと以下のようになります。
(初級者向けのWordPressの解説書籍の中にはこの手順で紹介されているケースが多いようですね。)

吹き出しの部分をよく見ていただけるとおわかりいただけると思いますが、住所が重複してしまっていますし、肝心の住所情報が途中で途切れています。
もっと伝えたい情報を整理して吹き出しを表示できないのでしょうか。

理想
1行目:施設名(法人の場合には会社名)
2行目:正しい住所情報

常々そんなことを思っていました。

地図検索を会社名(施設名)で検索すればいい。

今度は先ほどと同じあべのハルカスを「あべのハルカス」という施設名で検索し、iframeでGoogle Mapを埋め込んでみます。
ただし、同名の企業が複数ある場合などはリストとして表示されるので、その場合、リストから自社を選んでください。

もう一度吹き出しの部分を確認いただくと、施設名(法人の場合には会社名)&正しい住所情報で表示されています。

Google社の公式ヘルプを見ると次のように解説されています。

Google に表示されるビジネスの詳細情報は、さまざまな情報源からの情報を反映しており、ユーザーにできるだけ多くの最新情報を提供することを目的としています。ビジネスに関連付けられる詳細情報は、ビジネス リスティング作成時にオーナー確認を行う際やオーナー確認済みのリスティングを更新する際にお客様から提供された情報、ユーザーから寄せられた報告、およびその他の情報源から取得されます。こうしたビジネス情報は、Google マップや Google 検索などの Google サービスに関連性の高いローカル検索結果を表示するために活用されます。

Google Mapの情報なので、自社でコントロールできないと考えられている方もいらっしゃるかもしれませんが、実はGoogleマップに掲載してある自社の情報は、基本的に自社で登録、修正可能です。そのサービスが「Googleマイビジネス」です。
「Googleマイビジネス」についての詳しい解説は次回に書きたいと思います。