Google Mapの地図をWebサイトに埋め込む方法｜Google Mapのカスタマイズ第一弾

はじめまして。
Webデザイン勉強中のフロントエンドエンジニア、はるかです。

私が勉強していて気になったこと、仕事中にこの知識はWebデザインやWebサイトの制作で使えそうと思ったことを記事にしていきます！

今回は、Google Mapについてです。

先日Google Map について調べる機会があったので、記事にしようと思います！

Google Mapは地図を表示するだけでなく、好きな位置にアイコンを立てたり、地図のデザインを変えられたりと、いろいろカスタマイズできるんです。

これは、Javascriptの知識がなくてもコピペだけでできるので、Webデザイン初心者さん、Webサイトやブログを運営している人にも手軽に取り入れることができます。

今後、それぞれのカスタマイズ方法についてお伝えていきます。

今回は、第一弾として簡単にGoogleMapをWebサイトに埋め込む方法をお伝えします！

contents

１ Google Map でサイトに埋め込みたい地図検索して表示します。

今回は「新宿駅」を表示しました。

２共有をクリックします

３地図を埋め込むをクリックします。

４地図を大きさを選びます。

５地図のズームレベルを選びます

６ HTMLをコピーをクリックして、HTMLをコピーします

以下のようなHTMLタグがコピーされます。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4878371906575!2d139.6983826152877!3d35.689611037119626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd0d6b1ba1f%3A0x1c32a1f1ecacfdd5!2z5paw5a6_6aeF!5e0!3m2!1sja!2sjp!4v1617619782269!5m2!1sja!2sjp" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

７埋め込みたいWebサイトなどにHTMLをペーストして、完成です！

これでGoogleMapをWebサイトに埋め込むことができました！

次回はGoogleMapの地図の色を変更する方法をお伝えします！

お楽しみに！

はるか

Webデザイン勉強中のフロントエンドエンジニアです。