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

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

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

Contents

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

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

近年、モバイルでのウェブサイト閲覧が増加しており、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>

カスタマイズのポイント

地図の縦横比の調整

CSSのpadding-bottomの値を変更することで、地図の縦横比を調整できます：

4:3の比率 → 75%
16:9の比率 → 56.25%
1:1の比率 → 100%

セキュリティ対策

セキュリティを向上させるために、以下の属性を追加することをお勧めします：

loading="lazy": ページの読み込み速度を改善
referrerpolicy="no-referrer-when-downgrade": セキュリティを強化

よくある問題と解決方法

地図が表示されない場合

iframe URLが正しいか確認
HTTPSが正しく設定されているか確認

地図のサイズが大きすぎる/小さすぎる場合

padding-bottomの値を調整
コンテナのmax-widthを設定

モバイルでスクロールができない場合

タッチジェスチャーが有効になっているか確認
iframeにgesture="auto"を追加

まとめ

WordPressでGoogle Mapをレスポンシブ対応させることは、適切なCSSとHTMLの設定で実現できます。この記事で紹介した方法を実装することで、あらゆるデバイスで最適な地図表示が可能になります。

また、実装後は必ず以下の点を確認しましょう：

異なるデバイスでの表示確認
地図の操作性のテスト
読み込み速度の確認

これらの設定とチェックにより、ユーザーフレンドリーな地図表示を実現できます。