Googleマップのレスポンシブ表示で縦横比を変更する方法

yStandardではGoogleマップの埋め込み表示をレスポンシブ対応させる機能があります。

Googleマップの埋め込みコードは4:3の比率で表示されるように自動的に変換がかかりますが、この自動変換を停止・縦横比の変更をする方法について紹介します。

Googleマップ表示の縦横比を変更する方法

ページ内にGoogleマップを表示するためには表示したいマップを表示して共有メニューから表示用のHTMLを取得し、そのHTMLをカスタムHTMLブロックを使ってページに表示させます。

Googleマップ表示の縦横比は取得したHTMLにdata-aspect-ratio属性を追加することで変更できます。

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4868970051343!2d139.6899120157625!3d35.689634180192506!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1615769601703!5m2!1sja!2sjp" 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy"
>
</iframe>
※わかりやすくするため、属性毎に改行しています。

Googleマップで取得出来た上記のコードを縦横比 3:1で表示したい場合は次のようにします▼

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.4868970051343!2d139.6899120157625!3d35.689634180192506!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1615769601703!5m2!1sja!2sjp" 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy"
  data-aspect-ratio="3-1"
>
</iframe>
※「data-aspect-ratio="3-1"」を追加
※わかりやすくするため、属性毎に改行しています。

縦横比の指定は16-9, 4-3, 3-1, 2-1を指定できます。

また、自動変換させたくない場合はdata-aspect-ratio="none"をコードに追加してください。