BLOG

ホームページにGoogleマップを埋め込み、オシャレにする方法

kanri
本記事はこんな方にオススメです
  • ホームページに地図を設置したい
  • ホームページにGoogleマップを埋め込みたい
  • ホームページにGoogleマップのリンクを設置したい
  • Googleマップをもっとオシャレに表示したい
  • Googleマップの料金について知りたい方
  • スマホでGoogleマップが横にはみ出してしまって困っている
  • Googleマップが表示されなくて困っている

ホームページに地図を埋め込むなら、無料で利用できるGoogleマップがおすすめです。

今回は、

  • 【基本編】ホームページにGoogleマップを埋め込む方法
  • スマホ等でGoogleマップが横にはみ出してしまう時の対処法
  • 【応用編】Googleマップの色を変更してオシャレに表示する方法(APIキー不要)

について解説いたします。

Googleマップは単純に埋め込むだけなら無料で利用できます。

※APIキーを使ってさらにカスタマイズしようとすると、リクエスト数などによって料金が発生します。

あわせて読みたい
【簡単】QRコードを作ってホームページ・Googleマップ等に誘導しよう!
【簡単】QRコードを作ってホームページ・Googleマップ等に誘導しよう!

【基本編】ホームページにGoogleマップを埋め込む方法

1.Googleマップにアクセス

▼Googleマップ(別の画面で開きます)
https://www.google.co.jp/maps/?hl=ja

2.左上の入力窓に場所の名前や住所を入力し、検索

3.[共有]をクリック

4.[地図を埋め込む]をクリックし、サイズを選択、[HTMLをコピー]をクリック

(参考)[リンクを送信する]では、GoogleマップのURLを取得することができます。

下記のようにリンクを設置することも可能です。

1<a href="取得したURL" target="_blank">Googleマップを開く</a>

※「target=”_blank”」は別画面で開くという意味です。

あわせて読みたい
【簡単】QRコードを作ってホームページ・Googleマップ等に誘導しよう!
【簡単】QRコードを作ってホームページ・Googleマップ等に誘導しよう!

5.ホームページのGoogleマップを表示したい位置に貼り付ける(コードに貼り付ける)

ホームページ作成ソフトには、コードを触らずに編集できるモードコードで編集するモードの2つがある場合があります。

Googleマップのコードは、コードで編集するモードで、コード上に貼り付けないと表示されませんので、ご注意ください。

Googleマップが表示されません…

とご質問いただくことがありますが、コードを触らずに編集できるモードに貼り付けている場合がほとんどなので、チェックしてみてください。

貼り付けると以下のように表示されます。

《WordPressの場合》

「+」マークから[カスタムHTML]をクリックし、コピーしたコードを貼り付けます。

[プレビュー]で表示をチェックできます。

スマホ等でGoogleマップが横にはみ出してしまう時の対処法

パソコンで見るといい感じなのですが、スマホで見るとGoogleマップが横にはみ出してしまいます…

こんな時には、以下のように対応しましょう。

width=”100%” にする

上記は、「基準となる横幅に対して、Googleマップの横幅も100%表示する」という意味です。

widthは横幅の指定ですが、単位を何も記載しないと「ピクセル(px)」で指定することになります。

ピクセル指定だと横幅がガッチリ決まってしまっているので、横幅が狭いデバイス(スマホなど)で見ると、Googleマップが横にはみ出してしまうことがあります。

これは、横幅を「%」で指定してあげることで解決することができます。

「基準となる横幅に対して、Googleマップの横幅を●%で表示する」という指定方法なので、PC・スマホ・タブレットなどデバイスが変わっても、それにあわせて丁度良く表示することができます。

なお、上記例では「横幅100%」にしていますが、「80%」でも「50%」でも数値はいくつでも構いません。Googleマップを入れるホームページにあわせて調整してください。

えりー
えりー

100%が一番よく使うと思います

【応用編】Googleマップの色を変更してオシャレに表示する方法(APIキー不要)

iframeの「style=””」にCSSのコードを追加するだけで色を変更することができます。

上に表示されているグレースケールのGoogleマップにするためには、「filter: grayscale(100%); -webkit-filter: grayscale(100%);」を追加します。

1<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3280.1068282162005!2d135.4937619152323!3d34.70248538043406!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000e68d95e3a70b%3A0x1baec822e859c84a!2z5aSn6Ziq6aeF!5e0!3m2!1sja!2sjp!4v1680834916370!5m2!1sja!2sjp" width="600" height="450" style="filter: grayscale(100%); -webkit-filter: grayscale(100%); border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

追加する場所だけ間違えないようにしましょう。

1.グレースケールのGoogleマップ

filter: grayscale(100%); -webkit-filter: grayscale(100%);

えりー
えりー

スタイリッシュな雰囲気になります!

2.レトロなGoogleマップ(セピア)

filter: sepia(50%); -webkit-filter: sepia(50%);

えりー
えりー

100%にしてしまうと見づらいので、50%にしています。レトロな雰囲気になりますね!

3.黒を基調としたGoogleマップ(反転)

filter:invert(80%);-webkit-filter:invert(80%);

invertは反転させる時に使います。

えりー
えりー

これは使い所が難しいですが、黒を基調としたWebサイトには合うかもしれません。

4.カラフルなGoogleマップ

filter: hue-rotate(140deg); -webkit-filter:hue-rotate(140deg);

hue-rotateは色相を変化させる時に使います。

えりー
えりー

140degの部分の数値を変えると色々な色に変化させることができます。ぜひ試してみてください!

まとめ:Googleマップ利用時のPoint

地図があったほうがユーザーにとって親切なホームページになる場合は、ぜひGoogleマップを設置してみましょう!

Googleマップ利用時のポイントは以下のとおりです。

Googleマップ利用時のPoint
  • iframeで埋め込むだけなら、Googleマップは無料で利用できる
  • Googleマップが表示されない時は、HTMLコードに貼り付けているかをチェック(ホームページ作成ソフトなどで、見たまま編集できるモードに貼り付けていると表示されないことがあります。)
  • スマホでGoogleマップが横にはみ出してしまうときは、Googleマップの横幅を「%」で指定する(width=”100%”
  • 埋め込みではなくリンクを設置する場合は、[共有]-[[リンクを送信する]からリンクを取得し、
    <a href=”取得したURL” target=”_blank”>Googleマップを開く</a>

空創デザインオフィスでは、ホームページ作成、Googleマップの埋め込み・リンク設置なども承っております。

下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)

ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web制作のことや、就職・転職に役立つ情報を発信しています。
記事URLをコピーしました