Wie erstelle ich am einfachsten einen Lageplan für meine Website?

5 Kommentare
Fabian Reichle, Webdesigner (bis 2010)

Google dürfte jedem Internetnutzer ein Begriff sein. Die Firma hat unlängst Coca-Cola als wertvollste Marke abgelöst und das Verb «googeln» schaffte es sogar in den offiziellen Duden. Was die Suchmaschine so unglaublich erfolgreich macht, ist mitunter sicher die einfache Handhabung. Ein Eingabefeld, ein Knopf – mehr braucht es nicht, um das Internet zu durchkämmen.

Was viele Nutzer jedoch nicht wissen ist, dass Google eine Unmenge von weiteren Diensten bietet, welche die verschiedensten Bedürfnisse abdecken. Seien dies E-Mail-Verwaltungen, Besucherstatistiken oder Kartenservices – die Liste ist länger, als man es erwarten würde. Auf Letzteres, Google-Maps um genau zu sein, möchte ich ein wenig genauer eingehen.

Unter maps.google.ch bietet Google seit 2005 weltweit ein umfassendes Kartenmaterial an. Die Seite an und für sich ist gewohnt einfach via einem simplen Eingabefeld zu bedienen und die Resultate lassen sich, je nach Ort, bis auf die Strassenebene, das sogenannte Streetview, zoomen. Andererseits lassen sich Kartenausschnitte auch ohne Weiteres auf externen Seiten platzieren.

Folgende Adresse soll als Kartenausschnitt auf einer Webseite platziert werden:

Schulstrasse 4
8501 Frauenfeld

Nun wird wie folgt vorgegangen:

Nr 1

Nach Adresse suchen

Geben Sie im Suchfeld die gewünschte Adresse ein. Wenn Ihnen Informationen dazu fehlen, lassen Sie diese einfach weg, Google ergänzt diese in der Regel automatisch.

Suchfeld

Nr 2

Resultateseite

Möglicherweise findet Google mehrere Einträge zu Ihrem Suchkriterium. Ist das der Fall, werden diese in der linken Spalte aufgeführt. Im rechten Feld wird dann auch gleich schon die Karte angezeigt. Bei einem Klick auf die Suchresultate werden die Detailinformationen der Adresse auf die Karte übertragen.

Kartenausschnitt Resultateseite

Nr 3

Direktlink zur Karte auslesen

Klicken Sie auf «Link» oben rechts über der Karte. Eine Dialogbox mit zwei Einträgen wird geöffnet.

Google generiert zu jedem Resultat einen direkten Link, welcher bei einem Klick darauf die entsprechende Karte öffnet. Diesen Link können Sie aus dem ersten Feld kopieren (und beispielsweise per Mail weiterschicken).

Parallel dazu wird ein Code erstellt, welcher es erlaubt, die gesamte Karte zu kopieren und auf einer x-beliebigen Seite zu platzieren. Dieser Code befindet sich im zweiten Feld.

Direktlink

Detaileinstellungen

In der Dialogbox unter «Link» kann auf «Eingebettete Karte anpassen und Vorschau anzeigen» geklickt werden, so dass sich ein neues Fenster öffnet. In diesen Optionen besteht die Möglichkeit, die Grösse des Ausschnittes zu bestimmen. Unter dem dritten Punkt können Sie wiederum den Code zum direkten Einbinden kopieren.

Detaileinstellungen

Nr 5

Kartenausschnitt einfügen

Ist das Kartenmaterial ausgewählt und der Code kopiert, muss dieser lediglich noch auf der eigenen Webseite platziert werden. Hierbei muss in die HTML-Code-Ansicht gewechselt werden. Jeder gängige Editor und jedes moderne CMS haben eine solche Funktion. Der Code von Google-Maps muss nun im Quellcode (wichtig: im Bodybereich) Ihrer Webseite eingefügt werden.

Kartenausschnitt einfügen

Das Resultat könnte folgendermassen aussehen:

Wie man schön erkennen kann, bleibt die Karte interaktiv. Es besteht also weiterhin die Möglichkeit, den Ausschnitt zu bewegen oder zu zoomen. Das Ganze ist übrigens gratis! Google-Maps bieten eine funktionelle Alternative zu statischen Karten, die unter Umständen weder benutzerfreundlich, noch einfach zu pflegen sind.

neuen Kommentar erstellen

Michi's Gravatar
noch schöner ist allerdings, wenn bei der suche nach dem firmennamen und adresse gesucht wird. dann wird nämlich im link resp. in der anzeige auch der firmenname oberhalb von der adresse aufgeführt (noch eine kleine spur perfekter).
Michi, am 3. Dezember 2009 um 10:34 Uhr
starkermann beat's Gravatar
hallöchen zusammen, Euer hinweis betr. google map ist absolute spitze, hab dies sogleich auf unserer homepage des verkehrsvereins hemberg integriert. weiter so, bin auf Eure weiteren hinweise sehr gespannt.
vielen dank und grüsschen aus hemberg.
beat starkermann.
starkermann beat, am 3. Dezember 2009 um 18:53 Uhr
Mischa Sameli's Gravatar
@Michi : herzlichen Dank für den Tipp - macht natürlich Sinn und sieht schön aus.

@beat starkermann : wow, toll gemacht, spontan umgesetzt und erst noch eine Newsmeldung dazu verfasst - schön, dass wir da behilflich sein konnten.
Mischa Sameli, am 3. Dezember 2009 um 20:27 Uhr
Mathias Gamper's Gravatar
Nett auch, dass die Geschichte genau gleich mit der ebenfalls bei Google-Maps integrierten Routenplanung («Route berechnen» oben links) funktioniert: Start und Ziel eingeben und die Route wird angezeigt und ist auf die gleiche Art und Weise in andere Websites integrierbar oder kann per Link versendet werden. In diesem Zusammenhang noch gut zu wissen: Entspricht die von Google vorgeschlagene Route nicht genau der gewünschten, so kann man auf der Karte einfach die blaue markierte Route mit der Maus packen und nach belieben in andere Wege leiten. Zeit und Strecke werden natürlich auch gleich aktualisiert.
Mathias Gamper, am 4. Dezember 2009 um 10:52 Uhr
Mahthias Gamper's Gravatar
Ich wurde von der Gemeinde Köniz gerade darauf aufmerksam gemacht, dass so natürlich auch die Einbindung von Googles StreetView funktioniert. Tolle Idee für einen virtuellen Rundgang durch die Stadt: http://www.koeniz.ch/streetview
Mahthias Gamper, am 18. Januar 2010 um 09:04 Uhr
Bitte lassen Sie dieses Feld leer
Kommentar hinzufügen


Bitte lassen Sie dieses Feld leer
Beitrag als E-Mail verschicken
E-Mail via Webmail versenden

Schön, dass Ihnen unser Beitrag gefallen hat. Benutzen Sie folgende Social Networking Dienste, um den Beitrag abzulegen und zu verteilen. Selbstverstädlich können Sie ein direktes Lesezeichen auf diesen Artikel setzen.