Google Maps Karten für mobile Auflösungen

Auf vielen Homepages kommen sie zum Einsatz, die Karten von Google Maps. Sie zeigen den Weg zum eigenen Unternehmen. Mit einem Codesnippet, welches direkt bei Google erstellt werden kann, geht das ganz einfach.

Meine Homepage ist mobil nutzbar, geht das da auch?

Nicht zwangsläufig. Denn die eigentlichen Google Karten sind nicht für das mobile Endgerät geschaffen.
So einfach das Einbinden der Google Maps Karten auch ist, mobil nutzbar auf Smartphone und Tablets ist diese Möglichkeit nicht. Nur mit einem Kniff geht das.

CSS macht die Google Maps Karte mobil

Um die Karte für mobile Anwendungen auszugeben, sind ein paar Zeilen CSS notwendig. Mit diesem Programmierschnipsel machst du deine Karte mobil.
Dazu muss der Code-Schnipsel von Google mit einem CSS-Attribut, einer sogenannten Klasse „umrahmt“ werden. Dabei vergeben wir für die Klasse einen eindeutigen Namen.

Anlegen der Klasse in der CSS-Datei

Öffne in WordPress über DesignEditor die Stylesheet.css deines Themes. Trage nun an beliebiger Stelle folgenden Code ein.

[php].google-karte {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-karte iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
[/php]

Bitte vergiss nicht das Ganze zu speichern!

Karte einbinden auf Seiten oder Beiträgen

Erstelle nun eine neue Seite oder einen Beitrag, wo deine Google-Karte erscheinen soll. Nutze dazu die Textebene deines WP-Editors. Die visuelle Ebene ist dafür nicht geeignet! Trage nun an die Stelle, wo die Karte erscheinen soll, folgendes ein:

[php]<div class="google-karte">
<iframe style="border: 0;" src="https://www.google.com/maps/linkzurfirmenkarte" width="800" height="600" frameborder="0">
</iframe>
</div>
[/php]

Beachte, dass der Pfad zu deiner Karte, beginnend mit https…. durch deinen Kartenlink ersetzt werden muss. Nach dem Einbinden musst du nur noch die Seite oder den Beitrag speichern und fertig.

LASS UNS IN VERBINDUNG BLEIBEN!

Ich möchte dir gerne die neuesten Neuigkeiten und Angebote zukommen lassen 😎

Hinweise zum Newsletter-Versand

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert