Web制作

ホームページにGoogleマップを埋め込んでオシャレに表示する方法

Googleマップ

アクセスページや会社概要ページには、Googleマップを入れてあげるとユーザーにとって親切なページになります。

Googleマップは、ホームページ上に単純に埋め込むだけなら無料で使うことが出来ます。
(APIキーを使ってGoogleマップを表示する場合は、表示回数の上限を超えると費用がかかります。)

また、チラシ等の紙媒体にGoogleマップを使ったり、Googleマップをなぞって(トレースして)地図を書く行為は著作権違反となるので注意しましょう。

今回は、

  • Googleマップをホームページに埋め込む方法
  • Googleマップのサイズを横幅ぴったりにする方法
  • Googleマップのリンクを送信する方法
  • (応用)ルート付きGoogleマップを埋め込む方法
  • (応用)Googleマップをちょっとオシャレに表示する方法

を解説いたします。

(基本)Googleマップをホームページに埋め込む方法

1.Googleマップにアクセス

https://www.google.co.jp/maps/?hl=ja

2.左上の検索バーで埋め込みたい地図の場所(住所)を検索

必要に応じて、サイドパネルを折りたたんで、右下の+-ボタンで拡大縮小したり、地図の上をクリックしながら移動して、位置を調整したりしましょう。

3.メニューボタンをクリック

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

5.[地図を埋め込む]タブをクリックし、[HTMLをコピー]をクリック

※(補足)左にある[中]をクリックすると、地図のサイズを変更できます。
[カスタムサイズ]を選ぶと、自由なサイズ設定が可能です。

6.Googleマップを表示したい場所に貼り付ける(Ctrl+V)

WordPressクラシックエディタの場合、[テキスト]タブに貼り付けてください。

WordPressブロックエディタの場合、[+]をクリックし、[カスタムHTML]に貼り付けてください。

↓このような形で表示されます。

Googleマップのサイズを横幅ぴったりにする方法

Googleマップをパソコンで見た時はいい感じなのに、スマホで見るとはみ出してしまう、なんて現象が起こった時は、下記の設定をしてみましょう。

HTMLタグのwidthを「100%」にする

<iframe src=”https://www.google.com/maps/・・・” width=”100%” height=”600″ style=”border:0;” allowfullscreen=”” loading=”lazy”></iframe>

これで、パソコンで見た時も、スマホで見た時も、横幅に対して100%のサイズで表示されるようになります。

↓横幅100%になりました!

Googleマップのリンクを送信する方法

メールなどでGoogleマップのリンクを送りたい時は、下記の手順でリンクを取得しましょう。

[リンクを送信する]タブをクリックし、[リンクをコピー]をクリック

前述「(基本)Googleマップをホームページに埋め込む方法」の1~4を行った後に、[リンクを送信する]タブをクリックすると、上記画面が開きます。

リンクをコピーし、このリンクをメール等に貼り付けてください。

※(補足)テキストリンクにすることも可能

<a href=”ここにGoogleマップのリンクを貼り付け” target=”_blank”>Googleマップを開く</a>

Googleマップのテキストリンクをホームページ上に掲載したい場合は、上記のように書いてみましょう。

↓こんな風にテキストリンクにできます。

Googleマップを開く

(応用)ルート付きGoogleマップを埋め込む方法

1.検索バーで地図を表示したい場所を検索してから、[ルート・乗換]をクリック

2.上のボックスに出発地、下のボックスに目的地を入力

あとは、通常の地図を埋め込む流れと同じように、メニューボタンをクリックして、[地図を共有または埋め込む]をクリックしてください。

↓ルートが表示できました!

(応用)Googleマップをちょっとオシャレに表示する方法

『そのままのマップだとなんか味気ない・・・』という方は、Googleマップをグレーにしてちょっとオシャレにしてみましょう。

下記のコードでGoogleマップのコード(<iframe>~</iframe>)を囲いましょう。

<div style=”filter: grayscale(100%);”>~</div>

↓こんな感じに囲ってください。
<div style=”filter: grayscale(100%);”><iframe src=”・・・”></iframe></div>

↓地図がグレーになりました!

まとめ:アクセスや会社概要ページにGoogleマップを埋め込んでみよう!

ぜひ、アクセスページや会社概要ページにはGoogleマップを埋め込んで、所在地がわかりやすいようにしてみましょう。

Googleマップだけだとルートがわかりにくい場合もあるため、店舗を経営している場合等で所在地が重要な場合は、Googleマップの他に簡略地図も入れてあげるとより親切です。

ちなみに、Yahooが提供しているYahoo地図(https://map.yahoo.co.jp/)等、他の地図サービスもありますが、ホームページ上に埋め込む場合はGoogleマップがおすすめです。

当方では、『Googleマップが表示されなくなってしまった!』『Googleマップ埋め込みを代行してほしい』『簡略地図を作りたい』『ホームページを作りたい』等といったご相談も承っておりますので、お気軽にお問い合わせください。

お問い合わせ