GoogleMapをページに設置する
地図を見るときに便利なGoogleMap。スマートフォンを使ってGoogleMapを利用されている方も多いかと思います。
目的地や知りたい周辺の情報を見るときに便利ですよね。私もよく活用します。
そんな便利なGoogleMapですが、ホームページへ設置する事ができるんです。
これだけでホームページへGoogleMapを設置できます！！
ホームページの画面と設置するGoogleMapのサイズが合わない場合は、設置コードの左にある三角（▼）をクリックしてみてください。
ここから設置するサイズを選択する事ができますよ。
事前に設置するサイズが分かっていれば簡単です！！
でも設置した後でやっぱりもっと大きくしたい。小さくしたいと思う事もありますよね。
その都度GoogleMapで開いて、ソースコードを出して、設置して・・・となんだか面倒です。
ですが安心してください！ソースコードに表示サイズを指定する部分があるので、その数値を変えるだけで好きなサイズに変更することができるんです。
赤字で示した部分が横幅、青字で示した部分が高さの指定部分です。
この数値を変えて、ページデザインに適したサイズに変更してみてください！
ちなみにですがこの数値単位はpxですが、幅、高さの指定には「pxの単位は必要ない」のでご注意ください。
横幅・縦幅を大きくし過ぎるとページが見づらくなる
せっかくだから大きく地図を配置したい！と思って横幅いっぱい、高さも大きくとってしまうのは残念ながらオススメできません。
ホームページのスクロールは、今ではマウスの中央辺りにあるコロコロ・・・マウスホイールで行います。
ページ全体を見る為に右端のスクロールバーを操作していたのはもう遠い昔の事です・・・マウスホイールの付いていない普通のマウスは、もう絶滅したのではないでしょうか・・・時代を感じます。
マウスホイールの動作はページのスクロール以外にも、GoogleMapの拡大・縮小にも使われます。
試しにGoogleMapを表示させている部分にマウスカーソルを移動させて、マウスホイールをコロコロ動かしてみてください。
拡大・縮小されますよね。まさにこの動作がページを見るときにとても厄介なんです！！
マウスホイールを使ってページをスクロールしている途中にGoogleMapが登場すると、地図がどんどん縮小されてしまうんです！
そうなってしまってはGoogleMapを表示していない部分へマウスカーソルを移動させるか、右端にあるスクロールバーの操作、キーボードの下キーの入力など、ページを見る為の動作にひと手間かかってしまうので、それがとてもストレスになるんです。
GoogleMapが画面幅一杯に表示されているのは見栄えがいいかもしれませんが、ページスクロールが難しくなってしまいます。
せめてマウスカーソルを移動させてページスクロールを再開できるように、高さは控えておくなどの配慮も必要です。
スマートフォンの操作は改善されて問題なくなった
スマートフォン操作でも同じような事が起こりそうですが、既に改善されました。
以前はページを指先でスクロールしている途中にGoogleMapが出てくると、どんどん南の方へ地図が移動してしまって、いつまでスクロールしてもページを下まで見ることができませんでした。
ですが改善後は、GoogleMapの移動操作が「指2本」での操作になったので、通常の操作の範囲であればストレスなく、ページを見ることができるようになりました。
この仕様が以前はなかなか厄介で、「なんとかならないか」といった声を社内外からよく耳にしていました。本当に「Googleさんありがとう」の気持ちでいっぱいです。
こういった画面操作などはマウス操作とタッチスクリーンでは操作感が大きく異なります。今後はタッチスクリーンでの使いやすさを考慮した「操作デザイン」を作っていく必要がありそうですね。マウスを使った画面操作が主流だった時代が終わりつつあるのかもしれません。
レスポンシブWEBデザインに対応するには
レスポンシブWEBデザインで作られたページにGoogleMapを設置すると、パソコンとタブレットとスマートフォン、それぞれの画面で見ると画面と地図のサイズが合わないはずです。
貼り付けたソースコードに縦横サイズが明記されているので仕方ない部分ですが、なんとかしたいですよね？
大丈夫です。しっかり対応できます！！
position:relative;
padding-bottom:75%; /*これが縦横比*/
height:0;
overflow:hidden;
}
.google-maps iframe{
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
}
このようにCSSを用意します。
次に埋め込むソースコードの親要素に、div要素などを設けて先ほど用意したCSSを適応させます。
すると、画面幅に応じて高さも可変するGoogleMapが設置できるようになります！！
まとめ
・GoogleMapをページに設置することで、位置情報を簡単に知らせることができる
・GoogleMapを画面幅一杯に見えるくらい大きく設置してしまうと、ページを見るときに優しくない作りになる
・レスポンシブWEBデザインにもCSSを活用することでしっかり対応できる
