kulturbanause Blog

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

Google-Maps Bubble aus eingebetteten Karten entfernen

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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>

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>

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!

20 Kommentare

  1. Felix

    Verfasst am 15. Februar 2012 um 10:05 Uhr.

    Das wollte ich schon immer mal wissen. Vielen Dank.

  2. Sebastian

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

  3. Fidel

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

  4. chaoskoeppsche

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

  5. Tilo

    Verfasst am 17. Februar 2012 um 12:02 Uhr.

    Danke für den Tipp!

  6. Marcos

    Verfasst am 19. Februar 2012 um 16:20 Uhr.

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

  7. Jannis Gerlinger

    Verfasst am 23. Mai 2012 um 12:33 Uhr.

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

  8. Bernd

    Verfasst am 30. August 2012 um 12:24 Uhr.

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

    • Jonas Hellwig

      Verfasst am 30. August 2012 um 17:12 Uhr.

      Das sollte eigentlich auch im Firefox funktionieren ..

  9. K.M.

    Verfasst am 13. April 2013 um 19:48 Uhr.

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

  10. K.M.

    Verfasst am 13. April 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?

  11. Vitus Hösl

    Verfasst am 3. Juni 2013 um 18:12 Uhr.

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

  12. Felix Rizo-Patron

    Verfasst am 19. Juni 2013 um 12:06 Uhr.

    Danke!

  13. siebenkilopaket

    Verfasst am 19. August 2013 um 15:39 Uhr.

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

  14. Ulrich Trojan

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

  15. Matthias

    Verfasst am 11. Februar 2014 um 20:09 Uhr.

    Tja, klappt nicht mehr…

    • Jonas Hellwig

      Verfasst am 11. Februar 2014 um 21:32 Uhr.

      Das Live-Beispiel funktioniert doch noch.

      • Matthias

        Verfasst am 1. Juli 2014 um 12:58 Uhr.

        Na jetzt wohl nicht mehr, schade..

  16. telemarker

    Verfasst am 3. Mai 2014 um 18:15 Uhr.

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

  17. Sarah

    Verfasst am 23. September 2015 um 14:29 Uhr.

    Hallo,

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

    Danke!

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.