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.

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%;	
}

Links zum Thema

• Google Maps - erlaubte Nutzung und API
• Adaptive Maps

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

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>

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&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

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Vor einiger Zeit habe ich in einem kleinen Tutorial erklärt wie man mehrere Standorte in einer Google Karte anzeigen lässt. Auf 1stWebdesigner findet sich nun ein sehr lesenswerter Artikel der beschreibt wie Ihr die Google Maps API nutzen könnt um die Strecke zwischen zwei zuvor festgelegten Punkten zu berechnen. Wer keine Lust hat alles zu lesen kann auch einfach direkt das Beispiel laden.

• Google Maps API: Strecke zwischen zwei Punkten berechnen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Google Maps lässt sich bekanntlich kinderleicht in die eigene Website integrieren. Insbesondere auf der Kontaktseite eines Unternehmens oder auch einer Privatperson macht es durchaus Sinn Maps zu verwenden um den Besucher zu zeigen wo sich der Autor bzw. das Unternehmen befindet. Der Vorteil von Google Maps liegt dabei auf der Hand: Zum einen muss nicht mühsam eine Karte gezeichnet werden, zum anderen bietet Google stets aktuelle Informationen, verschiedene Ansichten, Zoomstufen und Kartenausschnitte.
Doch angenommen es sollen mehrere Standorte auf der Karte angezeigt werden; zum Beispiel weil das Unternehmen mehr als eine Filiale hat oder weil der Blogger zeigen möchte wo er im letzten Urlaub war. Wie Ihr mittels der Google Maps API mehr als einen Standort in die Karte eintragt und darüber hinaus auch noch Startposition, Zoomstufe, Kartenlayout und den Inhalt der Infoboxen anpasst erfahrt Ihr in diesem Tutorial.

Demo anschauen

Google Maps API Key

Um Google Maps auf einer Website verwenden zu können braucht Ihr zunächst ein Google Konto. Sobald Ihr erfolgreich in Euer Konto eingeloggt seid muss ein so genannter API-Key generiert werden mit dem sich die Website später bei Google authentifiziert.
Den API-Key könnt Ihr unter folgender Adresse generieren lassen. Gebt dazu einfach die URL in die Eingabemaske ein und bestätigt die Nutzungsbedingungen. ...

• Google Maps API

Elemente im head einbinden

Nun geht es daran die eigentliche Karte im Code einzubinden. Zunächst widmen wir uns dem head unserer Seite. Bindet zunächst nachfolgendes JavaScript ein und ersetzt im Code die Stelle XXX mit Eurem zuvor generierten API-Key.

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=XXXXXXXXX" type="text/javascript"></script>

Elemente im body einbinden

Um Google Maps verwenden zu können benötigen wir ein OnLoad-Ereignis. Ersetzt Euer bereits bestehendes öffnende body-Element durch folgenden Code:

<body onload="initialize()" onunload="GUnload()">

Nun folgt der eigentliche Code zur Einbindung der Karte. Mittels Kommentaren habe ich die wichtigen Punkte erklärt möchte sie aber dennoch im Detail erläutern. Wir beginnen damit die Karte im Code zu aktivieren und einige globale Eigenschaften festzulegen. Die Karte wird innerhalb eines div-Containers erstellt dessen Bezeichnug wir am Anfang einmalig festlegen. In diesem Beispiel habe ich den div "map-container" genannt. Mittels Inline-CSS-Style legen wir die Abmessungen fest. Innerhalb des noscript-Bereichs wird ein alternativer Content eingebunden für den Fall, dass der Seitenbesucher kein JavaScript aktiviert hat.

<!-- Name des DIVs, Abmessungen -->
<div id="map-container" style="width: 500px; height: 300px"></div>
<noscript>
Sie benötigen javaScript um diesen Inhalt betrachten zu können.
</noscript>
<script type="text/javascript">
function initialize() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map-container"));

Anschließend folgt die Festlegung des Startpunktes. Neben den Koordinaten (Längen- und Breitenangaben) des Karten-Mittelpunktes wird der Zoomfakter und das Kartendesign festgelegt.
Um die Koordinaten zu bestimmen könnt Ihr Euch diverser Tools bedienen. Am praktischsten finde ich die folgende Website. Gebt einfach wie gewohnt die Adresse ein und Ihr bekommt die Koordinaten direkt innerhalb der Karte angezeigt.

• Koordinaten (Breiten- und Längenangaben) berechnen

Der Zoomfakter wird als Zahl angegeben. In diesem Beispiel habe ich eine mittlere Entfernung von "12" gewählt.

Als Darstellungsoptionen für das Kartendesign stehen die für Google Maps typischen Eigenschaften zur Verfügung.

• G_NORMAL_MAP (Kartenansicht)
• G_HYBRID_MAP (Satellitenansicht mit eingeblendeten Straßen)
• G_SATELLITE_MAP (Satellitenansicht)

// Ausgangsdaten konfigurieren: Laengen und Breitenangabe des Karten-Mittelpunktes; Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)
map.setCenter(new GLatLng(51.213969,6.774424), 12, G_NORMAL_MAP);

Das folgende Snippet aktiviert den für Google Maps so typischen Marker und legt fest ob dieser per Klick einen Tooltip mit weiteren Informationen anzeigen soll.

function createMarker(point,html) {
var marker = new GMarker(point);

// Tooltip beim Klick auf den Marker anzeigen oder nicht.
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

Nun ist es an der Zeit die unterschiedlichen Standorte anzuzeigen. Den folgenden Code-Abschnitt könnt Ihr beliebig oft einsetzen. Die Koordinaten berechnet Ihr mit dem oben bereits erwähnten Tool. Innerhalb des Tooltips kann HTML-Code geschrieben werden.

// Standort Anfang
var point = new GLatLng(51.21412,6.77418);
var marker = createMarker(point,'Dieser Inhalt wird im Tooltip angezeigt.')
map.addOverlay(marker);
// Standort Ende

Innerhalb einer Google Map können noch weitere Steuerungs- und Darstellungselemente eingeblendet werden.

// Navigationselemente einblenden
map.addControl(new GLargeMapControl());

// Kartentypen einblenden
map.addControl(new GMapTypeControl());

// Übersichtskarte einblenden
map.addControl(new GOverviewMapControl());

// Massstab einblenden
map.addControl(new GScaleControl());

Das Script wird natürlich auch wieder geschlossen.

}
}
</script>

Vollständiges Code-Beispiel

Falls Euch die obige Erklärung zu detailliert oder auch zu oberflächlich war könnt Ihr Euch hier das gesamte Beispiel noch einmal am Stück anschauen. In diesem Beispiel habe ich mehrere unterschiedliche Standorte angegeben.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA5v01sGhQl-TBXa5oRUTuZBRRPDlVThHigVAlpBtmoYerwQltWxTPLGvWHiwSXccBTGODkm08VMXoAQ"
            type="text/javascript"></script>
</head>

<body onload="initialize()" onunload="GUnload()">
<!-- Name des DIVs, Abmessungen -->
<div id="map-container" style="width: 500px; height: 300px"></div>
<noscript>
Sie benötigen javaScript um diesen Inhalt betrachten zu können.
</noscript>
<script type="text/javascript">
function initialize() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map-container"));

// Ausgangsdaten konfigurieren: Laengen und Breitenangabe des Karten-Mittelpunktes; Zoomfaktor, Kartentyp (G_NORMAL_MAP, G_HYBRID_MAP, G_SATELLITE_MAP)
map.setCenter(new GLatLng(51.223335,6.76981), 13, G_HYBRID_MAP);

function createMarker(point,html) {
var marker = new GMarker(point);

// Tooltip beim Klick auf den Marker anzeigen oder nicht.
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

// Standort Anfang
var point = new GLatLng(51.21412,6.77418);
var marker = createMarker(point,'Hier wohne ich')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.217894,6.762105);
var marker = createMarker(point,'Fernsehturm')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.227394,6.770754);
var marker = createMarker(point,'Rheintreppen')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.215056,6.752064);
var marker = createMarker(point,'Medienhafen')
map.addOverlay(marker);
// Standort Ende

// Standort Anfang
var point = new GLatLng(51.226211,6.774702);
var marker = createMarker(point,'Altstadt')
map.addOverlay(marker);
// Standort Ende

// Navigationselemente einblenden
map.addControl(new GLargeMapControl());

// Kartentypen einblenden
map.addControl(new GMapTypeControl());

// Übersichtskarte einblenden
map.addControl(new GOverviewMapControl());

// Massstab einblenden
map.addControl(new GScaleControl());

}
}
</script>
</body>
</html>

Demo anschauen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.