WebサイトにGoogle mapを埋め込んで表示する方法のご紹介となります。正確に言うとHTMLで書くのではなく、HTMLを取得する方法になります。
Google mapの埋め込み方
![tokyo1](https://sunagitsune.com/wp-content/uploads/2019/02/tokyo1-650x286.jpg)
まずは地図の中を移動したり検索したりして、埋め込みたい箇所をGoogle mapで選択します
![tokyo6](https://sunagitsune.com/wp-content/uploads/2019/01/tokyo6.jpg)
「共有」をクリックします
![tokyo](https://sunagitsune.com/wp-content/uploads/2019/01/tokyo-650x286.jpg)
またはハンバーガーメニュー
![tokyo2](https://sunagitsune.com/wp-content/uploads/2019/01/tokyo2-1-650x289.jpg)
「地図を共有または埋め込む」をクリックします(表記変わるかもしれませんが、とにかくメニュー)
![tokyo3](https://sunagitsune.com/wp-content/uploads/2019/01/tokyo3-1.jpg)
「地図を埋め込む」をクリックします
![tokyo4](https://sunagitsune.com/wp-content/uploads/2019/01/tokyo4-650x664.jpg)
「HTMLをコピー」をクリック、またはドラッグして選択してコピーします
これをページに貼り付けると<iframe src=”https://~のHTMLコードになります。その状態でWebページを表示すると、
無事にGoogle mapが表示される、という寸法です。
地図を中心に表示したい
<center></center>でiframタグを囲んでください。
サイズを変更したい
下記画面でサイズを変更してHTMLを取得できます。
または直接HTMLのwidth,heightを変更してください。
![](https://sunagitsune.com/wp-content/uploads/2019/01/clouds-2517653_1280-160x90.jpg)
HTMLの便利な使い方・タグ逆引きリファレンス
ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。
勉強しながらちょっとずつ増やしていく所存です。
コメント