GoogleマップをWebページに埋め込む

SEO塾はビジネスの性格上、地図が不要だったが、別部門はアナログのローカル。これから力を入れようと別ドメインでWordPressの新規サイトを立ちあげようとしている。

その別部門のほうは、お客さまはすべて女性で、スマホもしくは携帯電話。パソコンはほとんど使っていない。
ただ、既存のサイトの手作りの地図を見たり、スマホで検索したりして、やって来る。

やはり、Googleマップが欠かせない。

WordPressのGoogleマップのプラグインにはAPIキーが必要

お客さまのためには、スマホ対応のGoogleマップにしなければならないので、レスポンシブの地図表示プラグインを使いたい。

今のGoogleマップでは、そういったプラグインを利用するには、APIキーを取得しなければならないようだ。

そこで、上記からGoogle Maps APIのキーを取得。

ところが…

Simple MapもTCD Google Mapsも地図が表示されない

Googleマップ関係のすべてのAPIを有効にしても、サイトの登録を

などいろいろ試しても、TCD Google MapsでもSimple Mapでも、Googleマップが表示されない…

見出し

結局、長時間かけても徒労に終わり、非常に単純な、Googleマップに行ってWebページ埋め込み用のコードを貼り付けることに。

サイトの1ページの1箇所に地図を表示するだけだから、最初からこれを選択すればよかったわけだ。

懸念は、レスポンシブかどうか、またスマホでスクロールするときに、地図が拡大や縮小でおかしくならないか、そういうことである。

しかし、プラグインで有効にならない以上、ほかに選択肢もない。

Googleマップに行く。

モバイル時代によく見かけるようになった、「≡」メニューのとなりに、住所をじかに入力。

「≡」をクリックして、「地図を共有または埋め込む」を選択。

とりあえず、大画面でも通用するに「大」を選んで、コードをコピー。

取得したコードだが、パソコンとタブレットやスマホで、少し表示を変えたいので、classを設定した「div」で囲む。

<div class="g_map">
<iframe src="https://www.google.com/maps/embed?pb=ほにゃらら"
 width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

さらに、「width="600"」のところを「width="95%"」に変更して、ページに貼りつける。

メディアクエリごとに、外側のdivと内側のiflameに設定していく。
（下記はパソコン用、右側を広くしておかないと、マウススクロールで地図が壊れるから）

.g_map { width: 80%; }
.g_map iframe{ margin:10px 0px 5px 55px; }

とくにスマホでは、divは100％、iflameのmarginも上以外は0にしておく。
（狭い画面でぎりぎり大きく表示させるため）

地図を移動させるには指2本で操作します：モバイルデバイスで

Googleも、モバイル対応に力を尽くしている。

ほんの少し前までは、スマホでスクロールしていると、地図が拡大されたり縮小されたり、鬱陶しかった。

なお、このスクリーンショットは、iMacのQuickTimeでiPhoneの画面を録画して、操作中の1場面を抜き出している。

Windowsでも、iPhoneの操作中の画面や音を録画できるソフトがあるようだ。

WordPress カスタマイズなら

好評発売中

インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ