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

Google Maps lässt sich über einen iframe kinderleicht in jede Website integrieren. Auch die Abmessungen des angezeigten Kartenausschnitts, die Art der Karte (Satellit, Gelände oder Karte) und der Zoom-Faktor lassen sich über den Mini-Editor von Google Maps intuitiv anpassen. Leider wird die Adresse durch eine häufig störende „Google Bubble“ markiert. Mit folgendem Parameter entfernt ihr die Sprechblase.

Standard Google Maps-Snippet

Das Standard-Snippet von Google Maps verwendet folgenden Code und erzeugt die nachfolgende Ansicht. Wie Ihr seht, wird die unschöne Bubble nicht nur angezeigt sondern auch noch abgeschnitten.


<iframe width="550" height="350" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0" src="http://maps.google.de/maps?
f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Petersburger+
Stra%C3%9Fe+74c,+Berlin&amp;aq=&amp;sll=52.515751,13.452802
&amp;sspn=0.032436,0.093513&amp;ie=UTF8&amp;hq=&amp;hnear=
Petersburger+Stra%C3%9Fe+74C,+Friedrichshain+10249+Berlin
&amp;t=m&amp;ll=52.524159,13.448296&amp;spn=0.07311,0.188828
&amp;z=12&amp;iwloc=A&amp;output=embed"></iframe>

Klicken Sie auf den unteren Button, um den Inhalt von maps.google.de zu laden.

Inhalt laden

Angepasstes Google Maps-Snippet

Wenn euch die Bubble stört, erweitert das src-Attribut des iframe am Ende um folgenden Parameter:


&amp;iwloc=near

Der vollständige Code und die integrierte Karten sehen dann für das Beispiel so aus:


<iframe width="550" height="350" frameborder="0" scrolling="no" 
marginheight="0" marginwidth="0" src="http://maps.google.de/maps?
f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Petersburger+
Stra%C3%9Fe+74c,+Berlin&amp;aq=&amp;sll=52.515751,13.452802
&amp;sspn=0.032436,0.093513&amp;ie=UTF8&amp;hq=&amp;hnear=
Petersburger+Stra%C3%9Fe+74C,+Friedrichshain+10249+Berlin
&amp;t=m&amp;ll=52.524159,13.448296&amp;spn=0.07311,0.188828
&amp;z=12&amp;iwloc=A&amp;output=embed&amp;iwloc=near"></iframe>

Klicken Sie auf den unteren Button, um den Inhalt von maps.google.de zu laden.

Inhalt laden

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 – 22 Kommentare

  1. Sarah
    schrieb am 23.09.2015 um 14:29 Uhr:

    Hallo,

    wie bekomme ich denn den Preis, bspw. fuer ein Hotel, weg?

    Danke!

    Antworten
  2. telemarker
    schrieb am 03.05.2014 um 18:15 Uhr:

    und wie bekommt man das „in google maps ansehen“ schild weg?

    Antworten
  3. Matthias
    schrieb am 11.02.2014 um 20:09 Uhr:

    Tja, klappt nicht mehr…

    Antworten
    • Jonas Hellwig
      schrieb am 11.02.2014 um 21:32 Uhr:

      Das Live-Beispiel funktioniert doch noch.

      Antworten
      • Matthias
        schrieb am 01.07.2014 um 12:58 Uhr:

        Na jetzt wohl nicht mehr, schade..

  4. Ulrich Trojan
    schrieb am 28.08.2013 um 13:19 Uhr:

    Hallo Jonas, danke für das gute Tutorial; die Entfernung der Bubbles klappt schon 1A nach dieser Anleitung. Hättest du uns/mir eventuell auch noch einen Tipp für die Parameter in der URL um das Overlay „Karte – Sat – Gelände – Earth“ auszublenden?

    Grüße Ulrich

    Antworten
  5. siebenkilopaket
    schrieb am 19.08.2013 um 15:39 Uhr:

    Genau das was ich gesucht habe! Vielen Dank für den Tipp.

    Antworten
  6. Felix Rizo-Patron
    schrieb am 19.06.2013 um 12:06 Uhr:

    Danke!

    Antworten
  7. Vitus Hösl
    schrieb am 03.06.2013 um 18:12 Uhr:

    Vielen Dank – das war genau das, was ich gesucht habe :)!

    Antworten
  8. Sprechblase bei eingebetteten Google Maps Karten entfernen ‹ wissen.netzhaut.de
    schrieb am 18.05.2013 um 23:13 Uhr:

    […] der Suche nach einer Lösung wurden wir auf dem Blog kulturbanause fündig und möchten den Tipp gleich weiter […]

    Antworten
  9. K.M.
    schrieb am 13.04.2013 um 19:51 Uhr:

    Oder sind damit die Einstellungen über die Karte selbst gemeint? Leider bekomme ich es nicht hin, die Kartenposition einzustellen. Die Karte ist vielzuviel hereingezoomt. Kann ich das im Editor auch einstellen?

    Antworten
  10. K.M.
    schrieb am 13.04.2013 um 19:48 Uhr:

    Wo finde ich denn diesen „Mini Editor“ von Google Maps?

    Antworten
  11. Google Maps im Responsive Webdesign | kulturbanause blog
    schrieb am 23.11.2012 um 08:47 Uhr:

    […] leider oft zu viel Platz ein. Wenn ihr die Blase ausblenden möchtet, schaut euch meinen Artikel Google Maps Bubble deaktivieren […]

    Antworten
  12. Bernd
    schrieb am 30.08.2012 um 12:24 Uhr:

    Gibt es auch ein Lösung dieses Problem für den Mozilla Firefox??

    Antworten
    • Jonas Hellwig
      schrieb am 30.08.2012 um 17:12 Uhr:

      Das sollte eigentlich auch im Firefox funktionieren ..

      Antworten
  13. Jannis Gerlinger
    schrieb am 23.05.2012 um 12:33 Uhr:

    Hey Jonas, danke für den Tipp. Das hab ich auch schon mehrfach benötigt!

    Antworten
  14. Marcos
    schrieb am 19.02.2012 um 16:20 Uhr:

    Danke für die info! (auch fidel und chaos!)

    Antworten
  15. Tilo
    schrieb am 17.02.2012 um 12:02 Uhr:

    Danke für den Tipp!

    Antworten
  16. chaoskoeppsche
    schrieb am 15.02.2012 um 12:08 Uhr:

    Man kann auch schlicht das „A“ von „iwloc=A&“ entfernen, sodass „iwloc=&“ übrig bleibt.

    Siehe auch http://www.wduffy.co.uk/blog/remove-address-bubble-from-google-maps-iframe/

    Antworten
  17. Fidel
    schrieb am 15.02.2012 um 10:39 Uhr:

    Ich mag eher die JavaScript API Variante. Kann man viel mehr machen. Eigene Farben, Icons, Click Events, etc.

    function initialize() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById(„map_div“), myOptions);
    }

    function loadScript() {
    var script = document.createElement(„script“);
    script.type = „text/javascript“;
    script.src = „http://maps.google.com/maps/api/js?sensor=false&callback=initialize“;
    document.body.appendChild(script);
    }

    window.onload = loadScript;

    Hiermit kann man dann noch die Farben anpassen: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

    Antworten
  18. Sebastian
    schrieb am 15.02.2012 um 10:08 Uhr:

    Danke für den Tipp!
    Im FF (10.0) sehe ich im oberen überhaupt keine Markierung. Im Chrome ist es so, wie es sein soll und du wohl erklären wolltest.

    Antworten
  19. Felix
    schrieb am 15.02.2012 um 10:05 Uhr:

    Das wollte ich schon immer mal wissen. Vielen Dank.

    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.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

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 →