Googleマップをサイトに埋め込む方法とは？簡単なやり方を紹介します！

不動産サイトや飲食店サイトのコーディングをしていると、サイト内にGoogleマップを配置することがしばしばあります。

案件によっては地図をデザインすることもあります。これはサイトのイメージに合わせるために地図をデザインするという理由です。

デザインされた地図だとユーザーが操作することができませんが、Googleマップだと操作することができるので、現在地からの移動時間や経路を知ることができます。

このような利点のあるGoogleマップをwebサイトに埋め込む方法について、紹介したいと思います。

Googleマップをサイトに埋め込む全体の流れ

Googleマップをサイトに埋め込む作業の全体の流れを説明します。大きく3段階に分かれています。

それぞれ解説していきますね。

HTMLコードの取得

まずはGoogleマップで指定した場所のHTMLコードを取得します。Googleマップを開き、住所入力等で指定の場所を表示してください。

指定の場所が表示されたら、「共有」→「地図を埋め込む」→「HTMLをコピー」でHTMLコードを取得することが出来ます。

簡単に取得できますので、是非やってみてください。

サイトに埋め込む

HTMLコードを取得したらサイトに埋め込みます。コピーしたコードをHTMLファイルの任意の場所にそのままペーストしてください。

ペーストしたら下記のようにGoogleマップが表示されると思います。

サイトに埋め込む方法も非常に簡単ですね。

サイズの調整

最後はGoogleマップのサイズ調整を行います。

取得したコードの後ろに「width」と「height」があります。自動でピクセル数が入力されていますが、それぞれの数値を変更することでGoogleマップのサイズが変わります。

「width」が横のサイズで「height」が縦のサイズです。お好みのサイズに変更してください。

最後に

以上がGoogleマップをwebサイトに埋め込む方法の紹介でした。

Googleマップは黄色緑青などカラフルな色で作成されております。取り入れる際はサイトデザインのトーンとに合うか考慮して作成してみてください。