Googleマップで取得したコードでもレスポンシブかつ「地図を移動させるには指2本で操作します」
モバイルファースト / マテリアルデザイン / JSON-LD
WebP/ 4K DPR3 レスポンシブイメージ
gridレイアウト / flexboxコンテンツ / レガシーWeb終焉!
モダンWebの証明! comからjpへ
SEO塾はビジネスの性格上、地図が不要だったが、別部門はアナログのローカル。これから力を入れようと別ドメインでWordPressの新規サイトを立ちあげようとしている。
その別部門のほうは、お客さまはすべて女性で、スマホもしくは携帯電話。パソコンはほとんど使っていない。
ただ、既存のサイトの手作りの地図を見たり、スマホで検索したりして、やって来る。
やはり、Googleマップが欠かせない。
お客さまのためには、スマホ対応のGoogleマップにしなければならないので、レスポンシブの地図表示プラグインを使いたい。
今のGoogleマップでは、そういったプラグインを利用するには、APIキーを取得しなければならないようだ。
そこで、上記からGoogle Maps APIのキーを取得。
ところが…
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にしておく。
(狭い画面でぎりぎり大きく表示させるため)
Googleも、モバイル対応に力を尽くしている。
ほんの少し前までは、スマホでスクロールしていると、地図が拡大されたり縮小されたり、鬱陶しかった。
なお、このスクリーンショットは、iMacのQuickTimeでiPhoneの画面を録画して、操作中の1場面を抜き出している。
Windowsでも、iPhoneの操作中の画面や音を録画できるソフトがあるようだ。
好評発売中
インスタや今風のECサイトのカード型フィードが、あっという間にできあがり
カテゴリーやタグの関連コンテンツも、お茶の子さいさい
テーマに頼らず、プラグインを使わず、スイスイとWordPressカスタマイズ