マップ／Map

地図を表示するためのコンポーネントです。マップはGoogle Mapsを表示するために利用します。


<div class="c-map">
  <div class="c-map__inner c-map__inner--aspectRatio4-3">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3243.8776871537575!2d139.6828511!3d35.6060836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f88b899cc553%3A0x5d0763367373fca5!2z5p2x5Lqs56eR5a2m5aSn5a2m!5e0!3m2!1sja!2sjp!4v1734350198715!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

原則

基本のアスペクト比（縦横比）は、ブレイクポイントがlg-mdは4:3、smは3:4です。
1:1や16:9も選択可能です。

パターン

表示サイズ

表示サイズの指定が可能です。

Sサイズ

<div class="c-map c-map--sizeS">
  <div class="c-map__inner c-map__inner--aspectRatio4-3">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3243.8776871537575!2d139.6828511!3d35.6060836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f88b899cc553%3A0x5d0763367373fca5!2z5p2x5Lqs56eR5a2m5aSn5a2m!5e0!3m2!1sja!2sjp!4v1734350198715!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

Mサイズ


<div class="c-map c-map--sizeM">
  <div class="c-map__inner c-map__inner--aspectRatio4-3">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3243.8776871537575!2d139.6828511!3d35.6060836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f88b899cc553%3A0x5d0763367373fca5!2z5p2x5Lqs56eR5a2m5aSn5a2m!5e0!3m2!1sja!2sjp!4v1734350198715!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

Lサイズ


<div class="c-map c-map--sizeLL">
  <div class="c-map__inner c-map__inner--aspectRatio4-3">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3243.8776871537575!2d139.6828511!3d35.6060836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f88b899cc553%3A0x5d0763367373fca5!2z5p2x5Lqs56eR5a2m5aSn5a2m!5e0!3m2!1sja!2sjp!4v1734350198715!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

比率

表示比率の指定が可能です。

1:1


<div class="c-map">
  <div class="c-map__inner c-map__inner--aspectRatio1-1">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3243.8776871537575!2d139.6828511!3d35.6060836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f88b899cc553%3A0x5d0763367373fca5!2z5p2x5Lqs56eR5a2m5aSn5a2m!5e0!3m2!1sja!2sjp!4v1734350198715!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>

16:9


<div class="c-map">
  <div class="c-map__inner c-map__inner--aspectRatio16-9">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3243.8776871537575!2d139.6828511!3d35.6060836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018f88b899cc553%3A0x5d0763367373fca5!2z5p2x5Lqs56eR5a2m5aSn5a2m!5e0!3m2!1sja!2sjp!4v1734350198715!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  </div>
</div>