WordPressでGooglemapを埋め込みレスポンシブに対応させる。

WordPressサイトにGoogle Mapを埋め込む際、スマートフォンやタブレットなど、様々な画面サイズで適切に表示させることは重要です。

この記事では、WordPressでGoogle Mapをレスポンシブ対応させる方法を詳しく解説します。

Contents

なぜレスポンシブ対応が必要か？
実装方法
カスタマイズのポイント
- 地図の縦横比の調整
- セキュリティ対策
よくある問題と解決方法
まとめ

なぜレスポンシブ対応が必要か？

近年、モバイルでのウェブサイト閲覧が増加しており、Googleもモバイルフレンドリーなサイトを重視しています。

Google Mapをレスポンシブ対応させることで、以下のメリットがあります。

全てのデバイスで適切な表示が可能
ユーザーエクスペリエンスの向上
SEO対策としても有効

実装方法

1. Google Mapsの埋め込みコードを取得

Google Mapsで表示したい場所を開く
「共有」ボタンをクリック
「地図を埋め込む」を選択
必要に応じてサイズをカスタマイズ
表示されたiframeコードをコピー

2. CSSコードの追加

以下のCSSコードをWordPressのテーマのstyle.cssファイルまたはカスタマイザーのカスタムCSSセクションに追加します。

.map-responsive {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

3. HTMLコードの実装

WordPressの投稿エディタで「カスタムHTML」ブロックを追加し、以下のコードを入力します。

<div class="map-responsive">
    <iframe src="[Google Mapsの埋め込みURL]" 
            width="600" 
            height="450" 
            style="border:0;" 
            allowfullscreen="" 
            loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>