GOOGLEマップをレスポンシブに対応させる方法
MENU
  1. HOME
  2. WEB制作
  3. GOOGLEマップをレスポンシブに対応させる方法

最近の作業実績

  • 2024年03月03日リンク回りの設定を調整いたしました。
  • 2024年03月01日CTAボタン周りを調整いたしました。
  • 2024年02月29日ローディング画面を設置いたしました。
  • 2024年02月28日既存サイトにセキュリティ対策を導入いたしました。
  • 2024年02月27日メールフォームの設定を調整いたしました。
  • 2024年02月26日カテゴリー編集画面で投稿と同じエディターを使えるようにカスタマイズいたしました。
  • 2024年02月25日既存サイトにセキュリティ対策を導入いたしました。
  • 2024年02月24日既存サイトにセキュリティ対策を導入いたしました。
  • 2024年02月23日投稿ページで発生していた不具合を解消いたしました。
  • 2024年02月22日PHPのバージョンアップに伴う不具合を解消いたしました。
  • 2024年02月21日既存サイトの画像を差し替えました。
  • 2024年02月20日既存サイトに新規ページを作成いたしました。
  • 2024年02月19日画像の差し替えを担当させていただきました。
  • 2024年02月18日サイト上に記事一覧を表示いたしました。
  • 2024年02月17日メールフォームの不具合を解消いたしました。
  • 2024年02月16日既存サイトにスパム対策を導入いたしました。
  • 2024年02月15日リンク回りの不具合を解消いたしました。
  • 2024年02月14日不完全な常時SSL化を正常な状態にいたしました。
  • 2024年02月13日既存サイトにセキュリティ対策を導入いたしました。
  • 2024年02月12日WAF周りで発生していた不具合を解消いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

GOOGLEマップをレスポンシブに対応させる方法

この投稿は2020/12/13に加筆修正いたしました。

GOOGLEマップをレスポンシブに対応させる方法をご紹介します。GOOGLEマップは埋め込みコードを設置しただけはレスポンシブに対応していません。この記事を読めば3分でGOOGLEマップをレスポンシブに対応させることができます。

この記事は約 2 分で読めます。

GOOGLEマップをレスポンシブに対応させる

GOOGLEマップを埋め込んでいるサイトを最近よく目にします。
簡単に地図をサイト上に埋め込めるので非常に便利ですよね。

地図の埋め込み=GOOGLEマップと言っても良いのかもしれません。
ただ、1点だけ残念な部分もあります。

それは、デフォルトではレスポンシブに対応していないと言うこと。
今の時代、スマホを無視したサイト構築はありません。

そこで、GOOGLEマップをレスポンシブに対応させる方法をご紹介します。

まずは、以下のようにGOOGLEマップを設置しましょう。

<div id="google_map">ここにGOOGLEマップの埋め込みコード</div>

【<div id=”google_map”></div>】で囲むのがポイントです。

【ここにGOOGLEマップの埋め込みコード】の部分に、GOOGLEマップから取得した埋め込みコードを記述してください。

GOOGLEマップのコードを取得する手順は、以下でご確認いただけます。

WordPressの投稿や固定ページにGoogleマップを埋め込む方法

埋め込みコードを記述したら、続いてCSSに定義を加えてレスポンシブに対応させましょう。
以下のように定義してやります。

#google_map {
position: relative;
width: 100%;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#google_map iframe,
#google_map object,
#google_map embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

上記は【GoogleMapの地図をレスポンシブサイトに埋め込む方法】のを参考にしています。

上記の様にCSSで定義してやると、以下の様にGOOGLEマップがレスポンシブ対応となります。

スマホで確認してみてください。
デバイスの横幅に合わせて縮小されます。

GOOGLEマップのレスポンシブ対応は以上です。

まとめ

GOOGLEマップをレスポンシブに対応させる方法をご紹介しました。

CSSだけで簡単にレスポンシブに対応できます。
興味のある方は参考にしてください。

Wordpressのカスタマイズや不具合など
何かお困りのことはありませんか?

Wordpressに関連するあなたのお悩み、解決いたします。
次のような方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトに不具合が発生したが、直し方が分からない。不具合の修正経験が豊富な人に任せたい。
  • 既存サイトにWordPressを導入したいが、やり方が複雑で自分ではできそうにもない。経験が豊富な人に任せたい。
  • WordPressがハッキングされたが修正の仕方が分からない。サイトを元通りにできる人を探している。
  • Wordpressで0からサイトを制作したいが、自分ではできそうにもない。プロにサイト制作を委託したい。

一つでも該当する方は、以下のフォームからお気軽にご相談下さい。

WordPressに関して今すぐ相談する

著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA