縦横比を維持したGoogleマップの埋め込み方法

GoogleMap埋め込みについて解説します。

Googleマップの埋め込みは、会社や店舗などの紹介にサイトに埋め込まれることが多いです。

表示崩れが無いように、縦横比を保った実装方法をお伝えします。

Googleマップのhtmlの取得

Googleマップにアクセスし、表示したい場所を検索します。
（今回は大阪駅にします。）

埋め込みたい地点を選択し、共有ボタンをクリックします。

ここで表示されている地図の縮尺のまま表示されるので、必要に応じてマップを拡大、縮小してから共有ボタンをクリックしてください。

次に、共有のモーダルが開いたら、地図を埋め込むをクリックします。

HTMLをコピーをクリックし、埋め込み用のhtmlをコピーします。

これで埋め込み用のhtmlの取得は完了です。

Googleマップの表示

コピーしたマップのhtmlをテキストエディタの任意の場所にペーストします。

これで、マップが表示されます。