各記事に地図を記載しました。

街歩きの際の利便性向上に、各記事に地図を記載しました。日毎に春めく昨今、ぜひお散歩のお供にお使いください。

※以下は自分用の覚書兼、ワードプレスでgooglemapを埋め込もうと考えている人向けのメモです。個人的に余計なプラグインを増やしたくないので、google apiキーを取得せず、かつレスポンシブ対応とするものとしました。

①googlemapからコードを取得
googlemapで目的地を検索
表示が適当な縮尺となるよう調整する
↓
「共有」タブをクリック
↓
「地図を埋め込む」をクリック
↓
「HTMLをコピー」をクリックし、コードをコピー

②記事をテキストエディタにし、任意の場所に下記コードを貼付け
<div class=”googlemap”>
【1でコピーしたHTMLを貼付け】
</div>

③各記事のカスタムCSSに下記コードを貼付け
iframe {
width: 100%;
aspect-ratio: 16/9; //
}

※1.テーマ全体の追加CSSに上記コードを貼付ければ、一括で対応できると思ったのですがレイアウトが崩れるだけの結果となったため、3の方法としました。

※2.CSSに下記コードを貼り付ける方法においても、レイアウトが崩れるだけとなったため中止しました。
.gmap-wrap{
position : relative;
height : 0;
padding-bottom : 56.25%; /* 縦横比の指定 */
overflow : hidden;
}

.gmap-wrap iframe,
.gmap-wrap object,
.gmap-wrap embed{
position : absolute;
top : 0;
left : 0;
width : 100%;