グーグルマップをブログに埋め込む方法とレスポンシブ対応
2018年5月 6日
2023年01月21日(rewrite)
・読み込みたい場所の地図を表示します
・左上の検索窓の
アイコンをクリックします
・一覧から、「
地図を共有または埋め込む」を選択します
・「地図を埋め込む」をクリックします
・サイズを「小」「中」「大」「カスタムサイズ」から選択します
・「HTMLをコピー」をクリックします
・クリップボードにコピーされるので、あとはブログの表示させたい位置に埋め込みます
・左上の検索窓の
アイコンをクリックします・一覧から、「
地図を共有または埋め込む」を選択します・「地図を埋め込む」をクリックします
・サイズを「小」「中」「大」「カスタムサイズ」から選択します
・「HTMLをコピー」をクリックします
・クリップボードにコピーされるので、あとはブログの表示させたい位置に埋め込みます
グーグルマップは、iframe(インラインフレーム)タグで埋め込まれます。
このタグは、別のサイトのコンテンツを読み込んで表示するものです。
CSSでアスペクト比を指定する方法でやってみます。
今回埋め込むグーグルマップの横と縦のサイズは、width="600" height="450"となっています。
600/450=4/3なので、アスペクト比は4:3となります。
HTMLとCSSのコードは以下のように記述しました。
/* HTML */
＜div class="googlemap">
＜iframe src="" width="600" height="450" ・・・>
＜/div>
/* CSS */
.googlemap{
aspect-ratio: 4/3;
}
div.googlemap > iframe{
width: 100% !important;
height: 100% !important;
}
これで下のように表示することができました。
個人ブログにグーグルマップを埋め込む有用性はあまり感じられませんが、簡単に設置できるので、何か便利な使いどころが見つかれば面白いですね。
