2023.04.07 2023.04.17

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

kanri

本記事はこんな方にオススメです

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

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

今回は、

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

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

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

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

【基本編】ホームページに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”」は別画面で開くという意味です。

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

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

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マップの埋め込み・リンク設置なども承っております。

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

お問い合わせ

#Googleマップ #ホームページ

ABOUT ME