Aeroporto di Bologna - Design System

Citymap 

<div class="c-citymap ">

    <div class="c-citymap__map">
        <img class="static-map" src="https://maps.googleapis.com/maps/api/staticmap?center=Atene,+Grecia&zoom=14&size=600x300&markers=Atene,+Grecia&key=AIzaSyABU478CeE-kWTe9e86eDm9n4ANtibBd3M" width="100%" alt="">

        <div class="dynamic-map" tabindex="-1">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27720.073525969474!2d23.71457427705499!3d37.98734565478933!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bd1f067043f1%3A0x2736354576668ddd!2sAtene%2C+Grecia!5e0!3m2!1sit!2sit!4v1530710163014" width="100%" height="320" frameborder="0" style="border:0" allowfullscreen></iframe>
        </div>

    </div>

    <div class="c-citymap__footer">
        <a href="https://www.google.com/maps?ll=37.990837,23.738339&z=13&t=m&hl=it-IT&gl=IT&mapclient=embed&q=Atene+Grecia" target="_blank">Visita la città su Google Maps</a>
    </div>

</div>
 
<div class="c-citymap {{ modifier }}">

  <div class="c-citymap__map">
    {{!-- The static map image will be shown in case of no JS --}}
    <img class="static-map" src="https://maps.googleapis.com/maps/api/staticmap?center=Atene,+Grecia&zoom=14&size=600x300&markers=Atene,+Grecia&key=AIzaSyABU478CeE-kWTe9e86eDm9n4ANtibBd3M" width="100%" alt="{{ title }}">

    <div class="dynamic-map" tabindex="-1">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d27720.073525969474!2d23.71457427705499!3d37.98734565478933!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14a1bd1f067043f1%3A0x2736354576668ddd!2sAtene%2C+Grecia!5e0!3m2!1sit!2sit!4v1530710163014" width="100%" height="{{ map-height }}" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>

  </div>

  <div class="c-citymap__footer">
    <a href="https://www.google.com/maps?ll=37.990837,23.738339&z=13&t=m&hl=it-IT&gl=IT&mapclient=embed&q=Atene+Grecia" target="_blank">Visita la città su Google Maps</a>
  </div>

</div>
 
{
  "map-height": "320"
}
  • Content: 
    .c-citymap {
}

.c-citymap__map {

  .dynamic-map {
    display: none;
  
    .js-available & {
      display: block;
    }
  
  }
  
  .static-map {
    max-width: 600px;
  
    .js-available & {
      display: none;
    }
  
  }

}

.c-citymap__footer {
  padding: remify(8px);
  a {color: primary(night, 100);}
}
  • URL: /components/raw/citymap/_citymap.scss
  • Filesystem Path: src/views/02-molecules/citymap/_citymap.scss
  • Size: 315 Bytes

No notes defined.