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.
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="https://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>
Klicken Sie auf den unteren Button, um den Inhalt von maps.google.de zu laden.
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="https://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>
Klicken Sie auf den unteren Button, um den Inhalt von maps.google.de zu laden.
Hallo,
wie bekomme ich denn den Preis, bspw. fuer ein Hotel, weg?
Danke!
und wie bekommt man das „in google maps ansehen“ schild weg?
Tja, klappt nicht mehr…
Das Live-Beispiel funktioniert doch noch.
Na jetzt wohl nicht mehr, schade..
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
Genau das was ich gesucht habe! Vielen Dank für den Tipp.
Danke!
Vielen Dank – das war genau das, was ich gesucht habe :)!
[…] der Suche nach einer Lösung wurden wir auf dem Blog kulturbanause fündig und möchten den Tipp gleich weiter […]
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?
Wo finde ich denn diesen „Mini Editor“ von Google Maps?
[…] leider oft zu viel Platz ein. Wenn ihr die Blase ausblenden möchtet, schaut euch meinen Artikel Google Maps Bubble deaktivieren […]
Gibt es auch ein Lösung dieses Problem für den Mozilla Firefox??
Das sollte eigentlich auch im Firefox funktionieren ..
Hey Jonas, danke für den Tipp. Das hab ich auch schon mehrfach benötigt!
Danke für die info! (auch fidel und chaos!)
Danke für den Tipp!
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/
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
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.
Das wollte ich schon immer mal wissen. Vielen Dank.