超簡単！Googlemap（グーグルマップ）ホームページ埋込方法

えりー

こんにちは、えりーです。

ホームページ上に地図を載せたいなら、Googlemap（グーグルマップ）を使いましょう。

特に店舗等の場合、所在地が重要なので地図があると親切ですよね。

Googlemap（グーグルマップ）は、会社概要やアクセスページに載せるのがおすすめです。

なお、Googlemap（グーグルマップ）は埋め込むだけなら、無料で使うことができます。

Googlemap（グーグルマップ）をカスタマイズして使う場合は、「APIキー」を取得する必要があり、アクセス数に応じて料金が発生します。

えりー

Googlemap（グーグルマップ）を使って少し高度なことをしたい場合は有料になる、ということです。

Contents

【基礎編】Googlemap（グーグルマップ）をホームページに埋め込む方法

1.Googlemapにアクセス
2.住所を入れ、検索
3.[共有]をクリック
4.[地図を埋め込む]タブをクリックし、サイズを選択
5.[HTMLをコピー]をクリック
6.ホームページのソースコードに貼り付ける

【応用編】ルート付きでGooglemap（グーグルマップ）をホームページに埋め込む

1.Googlemapにアクセス
2.住所を入れ、検索
3.[ルート・乗換]をクリック
4.現在地を入力
5.メニューをクリック
6.[地図を共有または埋め込む]をクリック
7.[地図を埋め込む]タブをクリックし、サイズを選択
8.[HTMLをコピー]をクリック
9.ホームページのソースコードに貼り付ける

一瞬でGooglemap（グーグルマップ）をレスポンシブに対応する方法
（参考）Googlemap以外のマップサービス
まとめ：Googlemap（グーグルマップ）を使って、ホームページに地図を載せよう！

【基礎編】Googlemap（グーグルマップ）をホームページに埋め込む方法

1.Googlemapにアクセス

▼Googlemap
https://www.google.co.jp/maps

2.住所を入れ、検索

3.[共有]をクリック

4.[地図を埋め込む]タブをクリックし、サイズを選択

小	横400px	縦300px
中	横600px	縦450px
大	横800px	縦600px
カスタムサイズ	自由入力	自由入力

5.[HTMLをコピー]をクリック

6.ホームページのソースコードに貼り付ける

WordPressの場合、[テキスト]タブのほうに貼り付けましょう。

地図が表示されれば完了です！

にゃーご

ルートもほしいにゃ

という方は、下記もあわせてご覧ください。

【応用編】ルート付きでGooglemap（グーグルマップ）をホームページに埋め込む

1.Googlemapにアクセス

https://www.google.co.jp/maps

2.住所を入れ、検索

えりー

ここまでは一緒です！

3.[ルート・乗換]をクリック

4.現在地を入力

5.メニューをクリック

えりー

このような３本線のメニューのことを、ハンバーガーメニューと呼びます。

にゃーご

美味しそうにゃ

6.[地図を共有または埋め込む]をクリック

7.[地図を埋め込む]タブをクリックし、サイズを選択

ここからは先程と同じです。

小	横400px	縦300px
中	横600px	縦450px
大	横800px	縦600px
カスタムサイズ	自由入力	自由入力

8.[HTMLをコピー]をクリック

9.ホームページのソースコードに貼り付ける

WordPressの場合、[テキスト]タブのほうに貼り付けましょう。

経路を自由に指定したい場合は、Googleマイマップを使いましょう。

▼Googleマイマップ
https://www.google.co.jp/intl/ja/maps/about/mymaps/

にゃーご

あれ、スマホで見たら地図がはみ出してるにゃ…

えりー

画面サイズが地図のサイズより小さくなったから、はみ出しちゃったんだね。

地図が画面からはみ出してしまう場合は、下記を参考にサイズ調整してみましょう。

一瞬でGooglemap（グーグルマップ）をレスポンシブに対応する方法

Googlemap（グーグルマップ）の横幅を「%」で指定してみましょう。
→width=”100%“

スマホで閲覧した時に、Googlemap（グーグルマップ）が画面の外にはみ出してしまうことがあります。

これは、レスポンシブwebデザインでホームページが作られている場合に起こります。

レスポンシブwebデザインとは
画面サイズによって、ホームページのレイアウトが変わる形式のことを「レスポンシブwebデザイン」と言います。

例えば、Googlemap（グーグルマップ）の横幅を「1000px」としていた場合、画面幅が1000px以下になると、横にはみ出してしまう現象が起こります。

そのような時は、Googlemap（グーグルマップ）の横幅を「%」で指定してみましょう。

Googlemap（グーグルマップ）のソースコードは、下記のような形式になっていますよね。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4867200053113!2d139.68991201523437!3d35.68963853711819!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1587531768662!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

このソースコードの「width=”600″」を「width=”100%”」と変更してみましょう。

横幅に対して100％（横幅めいっぱい表示する）という意味です。

画面幅が変わっても、常に横幅100％のサイズで表示されるため、画面からはみ出してしまうことがなくなります。