webデザイン

超簡単!Googlemap(グーグルマップ)ホームページ埋込方法

超簡単!Googlemap(グーグルマップ)ホームページ埋込方法
えりー
えりー
こんにちは、えりーです。

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

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

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

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

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

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

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

1.Googlemapにアクセス

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

2.住所を入れ、検索

住所で検索する

3.[共有]をクリック

共有をクリック

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

[地図を埋め込む]タブをクリックし、サイズを選択
横400px 縦300px
横600px 縦450px
横800px 縦600px
カスタムサイズ 自由入力 自由入力

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

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

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

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

[テキスト]タブ

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

にゃーご
にゃーご
ルートもほしいにゃ

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

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

1.Googlemapにアクセス

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

2.住所を入れ、検索

住所で検索する
えりー
えりー
ここまでは一緒です!

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

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

4.現在地を入力

現在地を入力

5.メニューをクリック

メニューをクリック
えりー
えりー
このような3本線のメニューのことを、ハンバーガーメニューと呼びます。
にゃーご
にゃーご
美味しそうにゃ

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

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

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

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

[地図を埋め込む]タブをクリックし、サイズを選択
横400px 縦300px
横600px 縦450px
横800px 縦600px
カスタムサイズ 自由入力 自由入力

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

[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%のサイズで表示されるため、画面からはみ出してしまうことがなくなります。

(参考)Googlemap以外のマップサービス

Googlemap以外にもマップサービスはあるので、Googlemapで事足りない時には利用してみても良いかもしれません。

まとめ:Googlemap(グーグルマップ)を使って、ホームページに地図を載せよう!

所在地が重要な場合は、ぜひ上記を参考に、ホームページ上にGooglemap(グーグルマップ)を掲載してみましょう!

所在地がわかりにくい場合は、簡略地図経路を撮影した写真等を一緒に掲載するとより親切です。

ホームページ作成サポート簡略地図制作依頼なども承っておりますので、お気軽にお問い合わせください。

にゃーご
にゃーご
一人で悩まず相談したほうが良いにゃ
ABOUT ME
えりー
えりー
空創デザインオフィス」代表。 フリーランスデザイナーとして、web・グラフィックデザインを行う傍ら、ホームページや広告を作りたい人への支援、web・グラフィックデザイナーの育成、ブロガー・アフィリエイターの育成等を行っている。 →プロフィールお問い合わせ空創デザインオフィス
error: Content is protected !!