ホームページ上に地図を載せたいなら、Googlemap(グーグルマップ)を使いましょう。
特に店舗等の場合、所在地が重要なので地図があると親切ですよね。
Googlemap(グーグルマップ)は、会社概要やアクセスページに載せるのがおすすめです。
なお、Googlemap(グーグルマップ)は埋め込むだけなら、無料で使うことができます。
Googlemap(グーグルマップ)をカスタマイズして使う場合は、「APIキー」を取得する必要があり、アクセス数に応じて料金が発生します。
- 【基礎編】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.[地図を埋め込む]タブをクリックし、サイズを選択
![[地図を埋め込む]タブをクリックし、サイズを選択](https://kusou-design-blog.com/wp-content/uploads/2020/04/03.jpg)
小 | 横400px | 縦300px |
---|---|---|
中 | 横600px | 縦450px |
大 | 横800px | 縦600px |
カスタムサイズ | 自由入力 | 自由入力 |
5.[HTMLをコピー]をクリック
![[HTMLをコピー]をクリック](https://kusou-design-blog.com/wp-content/uploads/2020/04/04.jpg)
6.ホームページのソースコードに貼り付ける
WordPressの場合、[テキスト]タブのほうに貼り付けましょう。
![[テキスト]タブ](https://kusou-design-blog.com/wp-content/uploads/2020/04/05.jpg)
地図が表示されれば完了です!
という方は、下記もあわせてご覧ください。
【応用編】ルート付きでGooglemap(グーグルマップ)をホームページに埋め込む
1.Googlemapにアクセス
2.住所を入れ、検索

3.[ルート・乗換]をクリック
![[ルート・乗換]をクリック](https://kusou-design-blog.com/wp-content/uploads/2020/04/06.jpg)
4.現在地を入力

5.メニューをクリック

6.[地図を共有または埋め込む]をクリック
![[地図を共有または埋め込む]をクリック](https://kusou-design-blog.com/wp-content/uploads/2020/04/09.jpg)
7.[地図を埋め込む]タブをクリックし、サイズを選択
ここからは先程と同じです。
![[地図を埋め込む]タブをクリックし、サイズを選択](https://kusou-design-blog.com/wp-content/uploads/2020/04/10.jpg)
小 | 横400px | 縦300px |
---|---|---|
中 | 横600px | 縦450px |
大 | 横800px | 縦600px |
カスタムサイズ | 自由入力 | 自由入力 |
8.[HTMLをコピー]をクリック
![[HTMLをコピー]をクリックー]をクリック](https://kusou-design-blog.com/wp-content/uploads/2020/04/11.jpg)
9.ホームページのソースコードに貼り付ける
WordPressの場合、[テキスト]タブのほうに貼り付けましょう。
![[テキスト]タブ](https://kusou-design-blog.com/wp-content/uploads/2020/04/05.jpg)
経路を自由に指定したい場合は、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%のサイズで表示されるため、画面からはみ出してしまうことがなくなります。
(参考)Googlemap以外のマップサービス
Googlemap以外にもマップサービスはあるので、Googlemapで事足りない時には利用してみても良いかもしれません。
まとめ:Googlemap(グーグルマップ)を使って、ホームページに地図を載せよう!
所在地が重要な場合は、ぜひ上記を参考に、ホームページ上にGooglemap(グーグルマップ)を掲載してみましょう!
所在地がわかりにくい場合は、簡略地図や経路を撮影した写真等を一緒に掲載するとより親切です。
ホームページ作成サポートや簡略地図制作依頼なども承っておりますので、お気軽にお問い合わせください。