Googleマップをサイトに埋め込む方法をwebデザイナーが紹介!

Googleマップをサイトに埋め込む方法の紹介!

takato(@n8takato)です!

Googleマップをサイトに埋め込みたい

この記事では上記の課題を解決します。

店舗を構えるお店のwebサイトにとってGoogleマップはほぼ必須になります。

サイトにGoogleマップが埋め込まれていることで、訪問者はすぐに店舗の位置を知ることが出来ますし、Googleマップに移動するのも楽になります。

今回はGoogleマップをサイトに埋め込む方法を紹介します。

    この記事でわかること
  • Googleマップをwebサイトに埋め込む方法

目次

Googleマップをサイトに埋め込む方法

Googleマップをサイトに埋め込むには、下記の3ステップで行うことが出来ます。

1.Googleマップで場所を指定する
2.Googleマップ上でHTMLコードを取得する
3.webサイトにコードを貼り付ける

それぞれ説明していきます。

Googleマップで場所を指定する

Googleマップ上で場所を指定します。住所入力をすると簡単に場所を指定することが出来ます。

今回は目黒区の場所に設定します。

Googleマップで任意の場所を指定
Googleマップで任意の場所を指定

Googleマップ上でHTMLコードを取得する

Googleマップで場所を指定できたら、H TMLコードを取得します。

Googleマップの「共有」>「地図を埋め込む」でHTMLコードが取得できます。

Googleマップのサイズを指定できるので、好きなマップサイズを指定してからコードを取得してください。

Googleマップの共有
Googleマップの共有
GoogleマップでHTMLコードを取得
GoogleマップでHTMLコードを取得

コードを取得する際は青文字の「HTMLをコピー」を選択してください。

webサイトにコードを貼り付ける

先程取得したコードをwebサイト内に貼り付けます。

先程取得したコードは下記になります。

<div class="ad">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3242.333136713278!2d139.69665035018318!3d35.644163080105805!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b48ddc4d75b%3A0xf69e3ddcbf0379fc!2z5Lit55uu6buS6aeF!5e0!3m2!1sja!2sjp!4v1602823464624!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>

上記コードを貼り付けると、下記のようにGoogleマップがサイトに埋め込まれます。

Googleマップがサイト内に埋め込まれました。完成です。

最後に

今回はGoogleマップをサイトに埋め込む方法を紹介しました。

非常に簡単な内容ですよね。LPを制作する時に是非使用してみてください。

下記はwebデザインに関する記事です。もし興味があれば合わせて読んでみてください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる