Posts Tagged ‘Google Maps’

Donnerstag, 13. November 2014

Google Maps in eigene Web-Site integrieren

Damit man Google Maps-Karten in die eigene Web-Site integrieren kann, benötigt man ein Google-Konto und Zugriff auf die Google Developers Console.

Dort findet man im Menupunkt APIs & Auth in der Unterrubrik APIs die „Google Maps Embed API“, welche man dort auch gleich für die Verwendung aktiviert.

Um Missbrauch zu verhindern, sollte man zudem im Menupunkt Credentials unter Public API Access einen API Key für die Google Maps Embed API erstellen und bei Referers dann die Domainnamen erfassen, von welchen die Requests für Kartendaten kommen dürfen (Referer lassen sich selbstverständlich fälschen, aber ich gehe davon aus, dass Google Gegenmassnahmen in seinen serverseitigen Embed-Code eingebaut hat).

Auf der eigenen Web-Site fügt man dann das iFrame beispielsweise folgendermassen ein:

<iframe
  width="850"
  height="550"
  frameborder="0"
  style="border:0"
  class="map"
  src="https://www.google.com/maps/embed/v1/place?key=%ApiKey%&q=Bern+Switzerland&zoom=10">
</iframe>

Quelle: Google Maps Embed API

Tags: , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Donnerstag, 10. Juli 2014

Öffnungszeiten Credit Suisse Bern-Bundesplatz

Da das Standortverzeichnis meiner Hausbank seit Jahr und Tag ein Usability-Nightmare ist, lege ich hier den Link ab, der mich direkt zu den Öffnungszeiten der Credit Suisse Bern-Bundesplatz führt:

Credit Suisse AG, Bern, Bundesplatz 2, Schweiz – Privatkunden

Falls ein Webmaster der Grossbank bei diesem Artikel vorbeischauen sollte, hier einige Anregungen:

  • Bitte das Standortverzeichnis mit — aus eurer Sicht — exotischen Browsern wie Apple Safari testen.
  • Bei diesen Tests solltet ihr am Besten auf den Google Maps fokussieren: Habe ich mich mit Safari auf Bern reingezoomt und klicke Bern–Bundesplatz an, springt die Karte wieder auf die Weltansicht und das Zoomen kann von vorne beginnen …
  • Die Verzögerung von 1-2 Sekunden nach der Auswahl eines Drop-Down-Elements ist Web 0.1, nicht Web 2.0 (ich glaube ich muss einen unfocus-Event generieren)
  • Wieso muss ich mich überhaupt wie ein Idiot durch vier Drop-Downs durchhangeln? Ist das State of the Art-Usability von 2014?
  • Wieso gibt es kein Suchfeld mit Autovervollständigung, in welches ich bspw. „Bundesplatz“ eingeben kann?
  • Wieso wird die URL nicht aktualisiert und wird eindeutig, wenn ich mich durch die Drop-Downs durchgekämpft habe und eine Filiale ausgewählt habe? Eine URL, welche ich als Lesezeichen ablegen kann und welche mich beim nächsten Aufruf direkt zu dem gewünschten Standort bringt?

Stattdessen übermittelt ihr in der URL solches URL-encodiertes JSON-Gefrickel:

https://www.credit-suisse.com/who_we_are/de/office_locator.jsp#%7B%22fs%22%3A%7B%22cid%22%3Anull%2C%22prid%22%3Anull%2C%22plid%22%3Anull%2C%22sid%22%3Anull%2C%22d%22%3A%5B0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%5D%7D%2C%22ms%22%3A%7B%22c%22%3A%7B%22lat%22%3A46.94739121310314%2C%22lng%22%3A7.44410902261734%7D%2C%22z%22%3A18%7D%2C%22mk%22%3A%7B%22id%22%3A4451%7D%2C%22is%22%3A%7B%22id%22%3A%22mapPanel%22%2C%22ps%22%3A%7B%22id%22%3A4451%2C%22sid%22%3A11613%2C%22segid%22%3Anull%2C%22d%22%3A%5B0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%5D%7D%7D%7D

… was auf Gut Deutsch lautet:

{
    "fs": {
        "cid": null,
        "d": [
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0
        ],
        "plid": null,
        "prid": null,
        "sid": null
    },
    "is": {
        "id": "mapPanel",
        "ps": {
            "d": [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0
            ],
            "id": 4451,
            "segid": null,
            "sid": 11613
        }
    },
    "mk": {
        "id": 4451
    },
    "ms": {
        "c": {
            "lat": 46.94739121310314,
            "lng": 7.44410902261734
        },
        "z": 18
    }
}

Bravo, ihr habt gerade JSON-over-URL JoU erfunden!

Tags: , , , , , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen