Adaptīva Google Karte jūsu WordPress lapā

Pirms pievienot Google karti ir nepieciešams pievienot papildus rindas jūsu weblapas .css failam:

.google-maps {
      position: relative;
      padding-bottom: 75%; // This is the aspect ratio
      height: 0;
      overflow: hidden;
   }

 .google-maps iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
   }

Kad tas tika izdarīts, varat pievienot Google karti, ievietojot html kodu, ka ir norādīts piemērā:

<div class="google-maps"><iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d34763.31759586287!2d24.127696627816785!3d57.00519580278729!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46eecf2288021511%3A0x808993c47189809c!2zTWXFvmFwYXJrcywgWmllbWXEvHUgcmFqb25zLCBSxKtnYSwgTGF0dmlqYQ!5e0!3m2!1slv!2sru!4v1469863440077" width="1200" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Tagad Jūsu karte būs adaptīva un tiks korekti atspoguļota visās ierīcēs.

0 atbildes

Atbildēt

Vēlies pievienoties diskusijai?
Jūtieties brīvi, lai veicinātu!

Atbildēt

E-mail: info@itower.lv
2023 © Copyright - iTower.lv