Googleマップをスマホでもはみ出さずにShowitのWordPressブログに埋め込む方法

Googleマップ　Showit　レスポンシブ対応 Wordpressブログ装飾
2024-07-24
この記事は約9分で読めます。

こんにちは、WEBライターのNori（のり）です。このブログでは、ShowitとWordpressで組み立てるブログについて書いています。

おすすめの場所をブログ内で紹介する時、自分のサービスを地域に根付いたサービスにしたいとき、ブログ内でGoogleマップを利用したい場面は少なくありません。

今回の記事は、ブログ内にGoogleマップを埋め込む方法から初心者でもできるGoogleマップのレスポンシブ対応について紹介します。

Googleマップ埋め込み方法の基本

WordPressブログにGoogleマップを埋め込むためにはカスタムHTMLを用います。埋め込む手順は以下の通りです。

HTMLブロックを利用したGoogleマップを埋め込む手順

  • Step1
    Googleマップで地図を表示
    • Googleマップを開き、埋め込みたい場所を検索。
    • 例として、「東京駅」を検索します。検索ボックスに場所を入力し、拡大鏡アイコンをクリック。
  • Step2
    埋め込みコードを取得
    • 表示された地図の左側にある「共有」をクリック。
    • 「地図を埋め込む」タブを選択し、表示されたHTMLコードをコピー。
    • 埋め込む地図のサイズを選択することも可能（小、中、大、カスタム）。
  • Step3
    WordPressにコードを貼り付け
    • WordPressの管理画面で、Googleマップを埋め込みたいページや投稿を開く。
    • ブロックエディター（グーテンベルグ）を使用している場合、「＋」ボタンを押して「カスタムHTML」ブロックを追加し、コピーしたHTMLコードを貼り付ける。

Googleマップをブログ内に埋め込んだ場合の注意点

GoogleマップをブログにカスタムHTMLを使って埋め込む際は、以下の点を注意して対応する必要があります。

  1. ページの読み込み速度
    Googleマップを埋め込むと、外部サイト（Googleマップ）の情報を読み込むため、ページの読み込み速度が遅くなる可能性があります。ページの読み込み速度が遅いと、ユーザーが離脱する原因となり、SEO（検索エンジン最適化）にも悪影響を及ぼすことがあります。
  2. 利用規約の遵守
    Googleマップの利用規約に違反しないように注意が必要です。例えば、Googleマップのスクリーンショットを直接貼り付ける行為は利用規約に違反する可能性があります。
  3. サイズと表示の最適化
    埋め込む地図のサイズは、ブログのデザインやレイアウトに合わせて適切に設定する必要があります。Googleマップの埋め込みコードを取得する際に、サイズを「小」「中」「大」「カスタムサイズ」から選択できます。カスタムサイズを使う場合は、ブログのコンテンツに合わせてピクセル数を調整しましょう。
  4. スマートフォン対応（レスポンシブ対応）
    ブログ内にGoogleマップを埋め込むと、スマホなどのディバイスで表示させた場合に、マップの大きさが固定されているため、画面に納まらずはみ出してしまう場合があります。その場合、マップを埋め込む際のHTMLを修正する必要や、CSSの設定を行いディバイスに沿った表示を行うことで、ユーザーが地図をズームやスクロールして詳細を確認しやすくなります。これにより、ユーザーエクスペリエンスが向上します。
  5. 地図の縮尺の調整
    Googleマップをブログ内に埋め込んだ場合、地図の縮尺が適切にならない場合があります。表示させた地図がユーザーにとって地図を確認しやすい縮尺になっているか確認することが大切です。

初心者におすすめのGoogleマップのレスポンシブ対応の方法

Googleマップをブログ内に埋め込んだ場合に他のディバイスへのレスポンシブ対応方法は、いくつか方法があります。

おすすめ｜HTMLのみでレスポンシブ対応をする

初心者におすすめの方法は、HTMLのwidth=”600″の記述を”100%”にする方法です。例として東京駅のGoogleマップを実際に埋め込んでみます。

Googleマップから取得したコードをそのままカスタムHTMLに張り付けた場合

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.82785370744!2d139.76454987569062!3d35.68124052997358!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1721758483666!5m2!1sja!2sjp"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
></iframe>

スマホで表示させた場合、Googleマップから取得した埋め込みコードをそのまま張り付けると、スマホ画面からGoogleマップがはみ出してしまう場合があります。

Googleマップから取得したコードを修正することで、スマホでもGoogleマップがはみ出すことなく地図を表示させることが可能です。

Googleマップを埋め込む場合のHTMLコードは通常以下のようになっています。横幅を規定しているのは、赤枠で囲んだwidth=”600″の部分。

この横幅を規定しているwidth=”600″の部分をwidth=”100％”と変えて対応します。

これでスマホで表示させた場合も画面からはみ出すことなくGoogleマップを埋め込むことが可能になります。

HTMLとCSSを使用したGoogleマップのレスポンシブ対応

ブログ運営初心者の頃には、HTMLやCSSはよくわからないし、先ほど消化したwidth=”600″の部分をwidth=”100％”変更する方法が簡単で良いと思います。

少し慣れてきたら、HTMLとCSSを使用してレスポンシブ対応する方法もおススメです。

Googleマップの埋め込みコードをdivで囲みます。クラスは、.googlemapとしました。地図は例として東京駅を表示させています。

Googleマップでコピーした埋め込みコードをwordpressのカスタムHTMLに張り付けます。張り付ける際の注意点は、<div class=”googlemap”>埋め込みコード</div>で囲むこと。

<div class="googlemap">
  <!-- Google Mapの埋め込みタグ -->
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.833233673669!2d139.76451597578776!3d35.68110807258732!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1722400419961!5m2!1sja!2sjp"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
 ></iframe>
</div>

ShowitのカスタムCSSを記入する場所は、wordpressではなくShowit側へ記入が必要になります。

Showit ＞ Blig（画面左） ＞ Single post（画面左） ＞ advance setting（画面右） > custom CSSに下記のコードをコピペするようにしましょう。

Showit CustomCSS　場所
Showit　Demo site
.googlemap {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;    /*16:9の比率で固定したい場合：9/16=56.25%*/
}

.googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

おまけ：showitではなくWordpressのテーマを使用されている方は、外観＞テーマディタ＞子テーマのstyleCSSに張り付けるようにして下さい。下記は、Wordpressの無料テーマcocoonのstyleCSSの場所です。

cocoon子テーマ　styleCSS

Googleマップを埋め込んだ場合の縮尺の調整方法

Google Mapのズームレベルを設定する方法については、以下の手順を参考にしてください。

縮尺（ズームレベル）の調整方法

  • Step1
    Google Mapsを開く

    Google Mapsにアクセスし、表示したい場所を検索

  • Step2
    縮尺（ズームレベル）の調整

    地図上でマウスのホイールを使ってズームインまたはズームアウトするか、右下の「+」と「-」のボタンを使用して、希望のズームレベルに調整する

  • Step3
    地図を埋め込む

    ズームレベルを設定したら、左側のメニューから「共有」をクリックし、「地図を埋め込む」タブを選択。

  • Step4
    HTMLコードの取得

    表示された埋め込みコードには、ズームレベルが含まれており、コード内の!4f13.1の「13.1」の数字がズームレベルを示しています。この数字を変更することで、埋め込む地図のズームレベルをカスタマイズできる。この数字は１～180程度まで変更可能。

  • Step5
    カスタムコードの使用

    取得したHTMLコードをカスタムHTMLブロックを利用して、ブログやウェブサイトに貼り付ける。必要に応じて、ズームレベルの数字を変更して、望む視点を設定する。

デフォルトの13.1の場合

13.1から１へ変更した場合（狭域になる）

13.1から150に変更した場合（広域になる）

縮尺（ズームレベル）の目安

  • ズームレベルはデフォルトでは13.1とされている。1から180の範囲で設定可能で、150が最も広域で、1が最も詳細な地図を表示をさせます。
  • ズームレベルを低く設定すると、特定の地点の詳細が表示され、高く設定すると広範囲が表示されます。

これにより、Google Mapを埋め込む際に、特定の場所を強調したり、周辺地域を広く表示したりすることが可能になります。

Googleマップ埋め込み方法まとめ｜ShowitのWordpressブログ

このブログでは、Googleマップの埋め込み方法からレスポンシブ対応、縮尺調整の方法について解説しました。地域に根ざした活動をする際にブログでGoogleマップを使うことで視覚的に情報を表示させることは、ユーザーにとってもメリットが多くあります。

おすすめスポットと自宅との距離がわかったり、あの場所からであれば帰りにあのお店でご飯を食べて帰れるね！と地図を見ることで行動もイメージしやすくなります。

ぜひ、レスポンシブ対応・縮尺調整を含めてGoogleマップを使いこなしてくださいね。

コメント

目次
Contents
タイトルとURLをコピーしました