Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Google Maps im Responsive Webdesign

Nicht nur das Layout einer Website lässt sich mitunter schwierig für die mobile Darstellung optimieren, auch verschiedene Inhalte sorgen regelmäßig für Unmut. Nachdem ich bereits Lösungen für Tabellen, Bilder und Videos im Responsive Webdesign vorgestellt habe möchte ich nun das Snippet für den Einsatz von eingebetteten Google-Karten nachliefern.

Container-Element für Google Maps

Zunächst müsst ihr das Code-Snippet von Google mit einem Container-Element umschließend:

<div class="responsiveContainer">
  <!-- iframe-Code von Google Maps -->
</div>

Anschließend fügt ihr folgenden Code in euer Stylesheet ein:

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

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

Das war es auch schon. Ab sofort passt sich die Karte dem übergeordneten Element eures Layouts an, sollte zu wenig Platz zur Verfügung stehen.

Eine Demo-Seite findet ihr hier

Container-Element für iframe, object & embed

Der Trick funktioniert übrigens nicht nur bei Google Maps, sondern bei allen Elementen die über iframe, object oder embed integriert wurden. Dazu müsst ihr das Snippet nur ein wenig anpassen.

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

.responsiveContainer iframe,
.responsiveContainer object,
.responsiveContainer embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;	
}

»Static Maps« als Alternative

Google bietet mit den sog. Static Maps eine sinnvolle Alternative zur hier gezeigten Lösung an. Lest dazu bitte den Beitrag.

Keine Karte anzeigen?

In vielen Fällen macht es Sinn darüber nachzudenken, ob die Karte überhaupt notwendig ist. Ggf. reicht es aus, wenn die Adresse verlinkt ist und Google Maps oder einen alternativen Kartendienst in einem neuen Tab öffnet.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 24 Kommentare

  1. Responsive Design - awwwa | Pearltrees
    schrieb am 07.06.2016 um 16:47 Uhr:

    […] Google Maps im Responsive Webdesign | kulturbanause® blog. […]

    Antworten
  2. Google Maps im Responsive Webdesign | kulturbanause® blog - MB Art & Tourism Agency e.U.
    schrieb am 29.04.2016 um 09:54 Uhr:

    […] Quelle: Google Maps im Responsive Webdesign | kulturbanause® blog […]

    Antworten
  3. ALex
    schrieb am 10.02.2016 um 15:06 Uhr:

    Hi,

    danke für diesen Beitrag, wenn auch schon älter.

    Hast du eine Idee, wie man einen Marker und dessen Position zum Beispiel immer 200px vom oberen Browser Rand positionieren kann? Unabhängig davon, wie hoch der Browser ist, soll der Marker nicht in der Mitte der Mappe positioniert werden, sondern immer einen festen Wert. Egal, ob Desktop oder Smartphone => Immer 200px am oberen Rand.

    Der Zweck wäre folgender: Ich möchte die Google Map als Background nutzen. Dadrauf das Kontaktformular.
    Oben drüber ist der Marker zu sehen:
    https://dl.dropboxusercontent.com/u/4082364/mappe.jpg

    Verstehst du, was ich meine? Ich konnte nichts darüber im Google finden.

    Im Prinzip habe ich es so hinbekommen, dass die Mappe und der Marker beide unterschiedliche Koordinaten bekommen. Das funktioniert dann aber nur mit der Auflösung meines Monitors, da sich die Map immer an die Map-Koordinaten ausrichtet, wenn man das Browserfenster zusammen drückt. Es orientiert sich nicht am Marker.

    Beste Grüße,
    Alex

    Antworten
  4. Sonny
    schrieb am 25.10.2015 um 13:56 Uhr:

    ..frage an die Spezialisten:
    wenn ich die Googlemap so einbinde wie von Jonas beschrieben alles ok. Wenn ich aber dem umschließenden Container ein Filtereffekt:drop-shadow zuweise, ist im Firefox die Map weg. Safari, Opera, Chrome alles ok. Nur bei mir so?
    used css:
    .shadowed {
    filter: „progid:DXImageTransform.Microsoft.Dropshadow(OffX=1, OffY=1,
    Color=’#60330033′)“;
    filter: url(shadow.svg#drop-shadow);
    -webkit-filter: drop-shadow(1px 1px 3px rgba(51,0,51,0.6));
    filter: drop-shadow(1px 1px 3px rgba(51,0,51,0.6));
    }

    Antworten
    • Jonas Hellwig
      schrieb am 25.10.2015 um 17:58 Uhr:

      Warum nimmst du keinen box-shadow?

      Antworten
      • Sonny
        schrieb am 04.12.2015 um 15:49 Uhr:

        Der Grund ist: a) Box mit abgerundete ecken b)will ich auf andere Elemente auch verwenden.

        Ich glaube ich hab den Fehler (Monate später): die Gänsefüße bei der Colordef gehören da gar nicht hin.
        Korrektur:filter:„progid:DXImageTransform.Microsoft.dropshadow(color=#000, offx=1, offy=1)“;
        Now it works!

  5. Chris
    schrieb am 15.09.2014 um 18:36 Uhr:

    Vielen Dank, tolle und verständlich beschriebene Lösung :-)

    Antworten
  6. Michael Janik
    schrieb am 29.01.2014 um 02:28 Uhr:

    Geiler Trick. Probiere ich mal gleich aus. Schade, dass Sie die Blase nicht zentriert mitverschiebt. Aber trotzdem genial.

    Antworten
  7. Martin
    schrieb am 29.08.2013 um 16:39 Uhr:

    Gut, ich hab meinen Denkfehler selbst gemerkt. Bzw. ist das Beispiel nicht ideal. Wenn jemand die Responsive Webseite aufruft, wird ein zentrierter Marker logischerweise zentriert angezeigt.

    Ich hab aber eine Karte die in zwei Spalten aufgeteilt und eine Hälfte zum Teil von einer Box überdeckt wird. Der Marker soll in der anderen Hälfte sichtbar sein. Der komplette Wrapper ist Responsive bzw. flexibel. Wenn ich das Ganze für eine bestimmte Auflösung ausrichte, dann muss die Position des Markers in einer anderen Auflösung aber wieder angepasst werden.

    Antworten
  8. Martin
    schrieb am 29.08.2013 um 16:25 Uhr:

    Was ist denn mit dem Marker, wie bekomme ich den responsive bzw. wie platziere ich diese beispielsweise immer in der Mitte?

    Antworten
  9. Pawel
    schrieb am 07.07.2013 um 11:25 Uhr:

    Vielen Dank für die Hinweise!

    Wenn ich das jetzt richtig verstanden habe, dann muss sich mein Kunde selbst über seinen Google Account bei Google Apis anmelden und anschließend unter Services den gewünschten Service (z.B. Google Maps API v3) aktivieren?
    Oder kann ich das auch über meinen Google Account für mehrere Kunden tun?

    Vielen Dank für die Antwort.

    Antworten
    • Jan
      schrieb am 20.07.2015 um 21:07 Uhr:

      Hallo,
      würde mich auch interessieren?

      Grüße

      Antworten
      • Jonas Hellwig
        schrieb am 20.07.2015 um 21:34 Uhr:

        Ich kann hier keine rechtssichere Antwort geben, aber wir loggen uns im Namen des Kunden in seinen Account ein (ggf. muss für den Kunden ein Account eingerichtet werden) und dort aktivieren wir die API.

  10. Liamara
    schrieb am 15.04.2013 um 11:03 Uhr:

    Super, vielen Dank für diese schöne, einfache Lösung!

    Antworten
  11. Responsive Webdesign: Grundlagen, Technik, Workflow, Inhalte – Meine Slides vom Vortrag in Bremen | kulturbanause blog
    schrieb am 10.12.2012 um 13:10 Uhr:

    […] Google Maps im Responsive Design […]

    Antworten
  12. Felix
    schrieb am 20.10.2012 um 20:40 Uhr:

    Hier noch eine andere Möglichkeit
    http://leaflet.cloudmade.com/

    Antworten
  13. Jonas Hellwig
    schrieb am 12.10.2012 um 18:50 Uhr:

    Diese Seite hier ist offiziell von Google Maps Deutschland und da steht nichts von weiteren Einschränkungen. Da ist sogar ein Unternehmen als Beispiel gewählt worden. http://maps.google.com/help/maps/getmaps/plot-one.html

    Antworten
    • Marcos
      schrieb am 19.10.2012 um 12:11 Uhr:

      Danke ! ;)

      Antworten
  14. Marcos
    schrieb am 09.10.2012 um 10:36 Uhr:

    Mmmm jetzt bin ich verwirrt. Wenn ich eine Website (wie im Moment) für meine Arbeitgeber mache, muss er sich oder ich mich bei Google anmelden wegen diese API? Auch ist nicht klar, wenn es jetzt nicht kostet, was ist wenn eine Mail kommt „wichtig“ (so wie immer! ;) ) wir haben es kostenpflichtig gemacht. Die Leute für die ich jetzt Websites mache sagen dann doch: ey was hast du gemacht?

    Alles wird schwerer in Netz …

    Danke Jonas!

    Antworten
  15. Andre
    schrieb am 09.10.2012 um 09:24 Uhr:

    Hallo,
    aber bitte darauf achten, das dies nur für rein private Seiten erlaubt ist.
    Firmensites oder selbst Blogs mit Werbung sind nicht privat und müssen die API nutzen.

    Antworten
    • Jonas Hellwig
      schrieb am 09.10.2012 um 09:32 Uhr:

      Danke für die Ergänzung! Ich habe auch noch einen Link zu diesem Thema unter dem Beitrag eingefügt.

      Antworten
  16. Google Maps im Responsive Webdesign | kulturbanause blog | responsive design | Scoop.it
    schrieb am 06.10.2012 um 17:02 Uhr:

    […] … regelmäßig für Unmut. Nachdem ich bereits Lösungen für Tabellen, Bilder und Videos im Responsive Webdesign vorgestellt habe möchte ich nun das Snippet für den Einsatz von eingebetteten Google-Karten nachliefern.  […]

    Antworten
  17. crsrdmn
    schrieb am 05.10.2012 um 11:10 Uhr:

    hm. es reicht doch komplett wenn die map in einem responsive grundgerüst sitzt die width auf 100% zu setzen. fall gegessen! warum noch mal nen extra container drum?

    Antworten
    • Jonas Hellwig
      schrieb am 05.10.2012 um 18:22 Uhr:

      Unter ganz bestimmten Umständen hast du recht, aber oft funktioniert es ohne Container-Element nicht, oder nicht zuverlässig genug steuerbar.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →