HTMLでWebページにGoogle mapの地図を埋め込む方法/埋め込み地図のカスタマイズとプレビューの使い方

IT

WebサイトにGoogle mapを埋め込んで表示する方法のご紹介となります。正確に言うとHTMLで書くのではなく、HTMLを取得する方法になります。

Advertisements

Google mapの埋め込み方

tokyo1

まずは地図の中を移動したり検索したりして、埋め込みたい箇所をGoogle mapで選択します

tokyo6

「共有」をクリックします


tokyo

またはハンバーガーメニュー



tokyo2

「地図を共有または埋め込む」をクリックします(表記変わるかもしれませんが、とにかくメニュー)

tokyo3

「地図を埋め込む」をクリックします

tokyo4

「HTMLをコピー」をクリック、またはドラッグして選択してコピーします


これをページに貼り付けると<iframe src=”https://~のHTMLコードになります。その状態でWebページを表示すると、

無事にGoogle mapが表示される、という寸法です。

地図を中心に表示したい

<center></center>でiframタグを囲んでください。

サイズを変更したい

下記画面でサイズを変更してHTMLを取得できます。
tokyo5
または直接HTMLのwidth,heightを変更してください。

HTMLの便利な使い方・タグ逆引きリファレンス
ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。 勉強しながらちょっとずつ増やしていく所存です。

コメント