kulturbanause Blog

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

Google Maps


Static Google Maps – bessere Karten im Responsive Design?

Vor einiger Zeit habe ich einen Beitrag verfasst, in dem erklärt wird, wie Google Maps in flexiblen Web-Layouts eingebettet werden kann. In diesem Beitrag möchte ich eine – für meinen Geschmack benutzerfreundlichere – Alternative vorstellen und gerne in den Kommentaren diskutieren. Googles Kartendienst wird hierbei als automatisch generierte, statische Grafik (Static Map) eingebunden und verlinkt auf den Kartendienst.

Beitrag zu Ende lesen

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.

Beitrag zu Ende lesen

Mehrere Standorte in Google Maps anzeigen

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.

Beitrag zu Ende lesen