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
Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …
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&source=s_q&hl=de&geocode=&q=Petersburger+
Stra%C3%9Fe+74c,+Berlin&aq=&sll=52.515751,13.452802
&sspn=0.032436,0.093513&ie=UTF8&hq=&hnear=
Petersburger+Stra%C3%9Fe+74C,+Friedrichshain+10249+Berlin
&t=m&ll=52.524159,13.448296&spn=0.07311,0.188828
&z=12&iwloc=A&output=embed"></iframe>
Angepasstes Google Maps-Snippet
Wenn euch die Bubble stört, erweitert das src-Attribut des iframe am Ende um folgenden Parameter:
&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&source=s_q&hl=de&geocode=&q=Petersburger+
Stra%C3%9Fe+74c,+Berlin&aq=&sll=52.515751,13.452802
&sspn=0.032436,0.093513&ie=UTF8&hq=&hnear=
Petersburger+Stra%C3%9Fe+74C,+Friedrichshain+10249+Berlin
&t=m&ll=52.524159,13.448296&spn=0.07311,0.188828
&z=12&iwloc=A&output=embed&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!
22 Kommentare
Kommentar verfassen
Felix
Verfasst am 15. Februar 2012 um 10:05 Uhr.
Das wollte ich schon immer mal wissen. Vielen Dank.
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.
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
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/
Tilo
Verfasst am 17. Februar 2012 um 12:02 Uhr.
Danke für den Tipp!
Marcos
Verfasst am 19. Februar 2012 um 16:20 Uhr.
Danke für die info! (auch fidel und chaos!)
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!
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 ..
K.M.
Verfasst am 13. April 2013 um 19:48 Uhr.
Wo finde ich denn diesen „Mini Editor“ von Google Maps?
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?
Vitus Hösl
Verfasst am 3. Juni 2013 um 18:12 Uhr.
Vielen Dank – das war genau das, was ich gesucht habe :)!
Felix Rizo-Patron
Verfasst am 19. Juni 2013 um 12:06 Uhr.
Danke!
siebenkilopaket
Verfasst am 19. August 2013 um 15:39 Uhr.
Genau das was ich gesucht habe! Vielen Dank für den Tipp.
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
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..
telemarker
Verfasst am 3. Mai 2014 um 18:15 Uhr.
und wie bekommt man das „in google maps ansehen“ schild weg?
Sarah
Verfasst am 23. September 2015 um 14:29 Uhr.
Hallo,
wie bekomme ich denn den Preis, bspw. fuer ein Hotel, weg?
Danke!