グーグルマップをブログに埋め込む方法とレスポンシブ対応

2018年5月 6日

2023年01月21日(rewrite)

・読み込みたい場所の地図を表示します
・左上の検索窓の

アイコンをクリックします
・一覧から、「

地図を共有または埋め込む」を選択します
・「地図を埋め込む」をクリックします
・サイズを「小」「中」「大」「カスタムサイズ」から選択します
・「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;
}

これで下のように表示することができました。
個人ブログにグーグルマップを埋め込む有用性はあまり感じられませんが、簡単に設置できるので、何か便利な使いどころが見つかれば面白いですね。

おすすめ記事

【覚え書き】アスペクト比 16:9 一覧表

Sti_Trace.logを削除するとどうなる？

パソコン版インスタグラムで、サブアカウントの追加・登録のやりかた・しかた

「暗号化辞書が正しくありません」で、pdfファイルが読めない

BMI値を計算・表示するスクリプト

JavaScriptを有効にしているのに「JavaScriptを有効にして下さい」と言われる

迷惑メールのHTMLのソースを確認する【雑記】

ウィンドウズXPの不審なフォルダ『\Program Files\Xerox\nwwia』

『nanaco』のポイント交換を計算・表示するスクリプト