kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Jetzt Tickets sichern!

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

Google Maps Infofeld ausblenden

In Google Maps wird automatisch eine Sprechblase mit der aufgerufenen Adresse angezeigt. Auf kleinen Bildschirmen nimmt diese Sprechblase leider oft zu viel Platz ein. Wenn ihr die Blase ausblenden möchtet, schaut euch meinen Artikel Google Maps Bubble deaktivieren an.

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.

Links zum Thema

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

20 Kommentare

  1. crsrdmn

    Verfasst am 5. Oktober 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?

    • Jonas Hellwig

      Verfasst am 5. Oktober 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.

  2. Andre

    Verfasst am 9. Oktober 2012 um 9: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.

    • Jonas Hellwig

      Verfasst am 9. Oktober 2012 um 9:32 Uhr.

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

  3. Marcos

    Verfasst am 9. Oktober 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!

  4. Jonas Hellwig

    Verfasst am 12. Oktober 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

    • Marcos

      Verfasst am 19. Oktober 2012 um 12:11 Uhr.

      Danke ! ;)

  5. Felix

    Verfasst am 20. Oktober 2012 um 20:40 Uhr.

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

  6. Liamara

    Verfasst am 15. April 2013 um 11:03 Uhr.

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

  7. Pawel

    Verfasst am 7. Juli 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.

    • Jan

      Verfasst am 20. Juli 2015 um 21:07 Uhr.

      Hallo,
      würde mich auch interessieren?

      Grüße

      • Jonas Hellwig

        Verfasst am 20. Juli 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.

  8. Martin

    Verfasst am 29. August 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?

  9. Martin

    Verfasst am 29. August 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.

  10. Michael Janik

    Verfasst am 29. Januar 2014 um 2:28 Uhr.

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

  11. Chris

    Verfasst am 15. September 2014 um 18:36 Uhr.

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

  12. Sonny

    Verfasst am 25. Oktober 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));
    }

    • Jonas Hellwig

      Verfasst am 25. Oktober 2015 um 17:58 Uhr.

      Warum nimmst du keinen box-shadow?

      • Sonny

        Verfasst am 4. Dezember 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!

  13. ALex

    Verfasst am 10. Februar 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

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.