googlemapをレスポンシブサイトやブログ記事に横幅100％可変埋め込み対応させる方法[福岡]

ブログで、何かの集会や集まる会場の紹介をするときにグーグルマップを表示させたりする事はあるのではないでしょうか？

ホームページ制作をする人以外にも、何かの教室をしている方などでも、このグーグルマップというのは便利なんで張り付けたり、埋め込んだりなどあると思います。

その時に、こういう事ってありませんか？

googlemapのサイズが気に食わん！

横幅が足りん！

横幅が大きすぎる！

縦幅が足りない。

縦幅が大きすぎる。

そして、この記事のタイトルにあるように、

横幅をどの端末で見てもきれいに揃えたい！

と思ったりしてませんか？

表示が思った時と違う場合ってほとんどの場合横幅サイズがあっていないからなんですね。

グーグルマップを共有するとした場合横幅が600が基本になっているようです。

こんな感じで、width=”600″ というのが横幅で、600ピクセルという横幅サイズという意味です。

ピクセルという単位の話そのものは、別に忘れてもらっていいのですが、グーグルマップが横幅最大表示に自動でなってほしい。

という時がありますよね？

その時は、横幅サイズを指定する所を100％にしてあげるときれいに横幅いっぱいに表示されます。

width=”600″　を

width=”100%”　へ変更

なぜ、横幅を100％にするのか？という事ですが、同じブログ記事でも、見る人の状況で変わりますよね？

これは、youtubeを張り付ける時も同じなのですが、

共通点は、横幅が変わるという事で、それぞれの端末サイズに合わせて個別に横幅を固定して表示する事はほぼ不可能なんです。

だからこそ、固定の数字サイズではなく、割合という意味で％で表示してあげるんです。

まず、埋め込みたいグーグルマップの該当住所のページへ移動します。

すると青い文字で共有と書いてあるリンクがあるのでそれをクリック。

次に出てきた画像で、地図を埋め込むをクリック

すると、埋め込むインラインフレームというコピペするタグが表示されます。

それを範囲していしてコピーしましょう。
横にある　ＨＴＭＬをコピーをクリックでも構いません。

そうしたら、ブログ記事に張り付ける事になります。

その際、ブログシステムによりますが、htmlモードや、テキストモード　と呼ばれる状態で張り付けてください。

※ブログシステムによっては、ほかの呼び方をしている場合もあります。

そして、コピペしたら、前に説明した width=”600″ という所を、width=”100%”に変更して、保存してください。

これで、ブログ記事に表示されたグーグルマップの地図が、貼られた箇所の横幅最大に広がって表示されるはずです。

ちなみに、高さを高くしたり、低くしたい場合は、

height=”450″

この数字を大きくしたり、小さくしたりしてください。

これでグーグルマップの高さが広く表示できます。

これで、端末ごとの動画のサイズを気にする必要がなくなりましたね。

実際、動画としては、スマホの場合はほとんどがグーグルマップ専用のアプリみたいなのが起動するとおもうのですが、

起動する前に見ていくときに画像サイズがはみ出してしまって、スクロールするときに左右にフワフワ揺れたりする原因にもなったりします。

そういう不具合も、これで解決です。

参考になれば幸いです。

ではまた。

ホームページ制作各種メニュー