Wiedner Gürtel 12/1/2, 1040 Wien

Google Maps Karte responsive einbinden

Bewertung: 4 / 5

Stern aktivStern aktivStern aktivStern aktivStern inaktiv
 

Google bietet mit Ihrem Dienst Google Maps die geniale Möglichkeit eine Art Lagekarte in die eigene Website zu integrieren 

Heutzutage sind moderne Websites responsive! Das bedeutet, dass sie sich an die Anzeige des jeweiligen Endgerätes anpassen. Leider wird eine normal eingebundene Google Maps Karte aber nicht an die Größe des Endgerätes angepasst.

Wie dies doch funktioniert, erfährst du in diesem Artikel.

 

Damit die Google Maps Karte responsive ist, sind zwei Schritte notwendig:

 

1. Der iFrame Code, welchen man von Google Maps erhält, muss mit einem extra div-Container umgeben werden. Dies könnte z. B. folgendermaßen aussehen:

 

<div class="responsive_map">
… iframe code von google …
</div>

 

2. Damit das Ganze dann auch eine responsive Funktion erhält, ist noch folgender CSS Code notwendig:


.responsive_map {
height: 0;
overflow: hidden;
padding-bottom: 56%;
position: relative;
}

.responsive_map iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

 

Und schon passt sich die Karte immer an die Größe des Browserfensters an.

 

Des Weiteren solltest du auch unserer Beitrag Youtube Videos Responsive einbinden lesen!

 

9 Google Ads Fehler

Unsere Leistungen

Bleiben wir in Kontakt!

Blogheim.at Logo

ithelps logo 220

Wiedner Gürtel 12/1/2, 1040  Wien
Pernerstorferstraße 18, 3032 Eichgraben
Obermarktstraße 43, 6410 Telfs
Bessemerstraße 82/10. OG Süd , 12103 Berlin

Die 10 häufigsten SEO Fehler

und wie Sie diese vermeiden können: