Aysberg-Blog Weblog einer Internetagentur

Google Maps (3): Vollständig in eigene Webseiten einbinden

Freitag, 14. September 2007 von Jan Kurschewitz
3 Kommentare

Bisher waren Programmierkenntnisse vonnöten, wenn Sie Google Maps nicht nur verlinken wollten (wie in den vorhergehenden Beiträgen beschrieben). Seit wenigen Wochen gibt es eine äußerst einfache Möglichkeit, Google Maps in die eigene Website zu integrieren. Wir stellen beide Varianten vor.

Die drei Beiträge aus dieser Reihe „Google Maps nutzen“:

  1. Google Maps von einer Webseite verlinken
  2. Google Maps geht noch weiter!
  3. Google Maps vollständig in die eigene Website einbinden (dieser Beitrag)

1. Karte erstellen und anpassen

Sie erstellen die von Ihnen gewünschte Ansicht einer Karte, wie in unseren vorausgegangenen Beiträgen beschrieben.

2. HTML-Code kopieren

Rechts über der Karte befindet sich der Link „URL zu dieser Seite“. Statt dort, wie im ersten Beitrag beschrieben, nur den Link zur individuellen Map herauszukopieren (oberes Feld), kopieren Sie aus dem unteren Feld den einzubettenden HTML-Code (STRG + C) und fügen ihn an passender Stelle in Ihre Website ein (STRG + V). Bitten Sie ggf. Ihren Webdesigner oder Ihre Agentur um Hilfe.

123

Es handelt sich dabei um einen IFrame. Das ist eine spezielle Art von Frames, die aus verschiedenen Gründen eigentlich nicht mehr zeitgemäß sind und von fortgeschrittenen Webdesignern abgelehnt werden. In diesem Fall ist der integrierte Frame jedoch akzeptabel und bereitet im Normalfall keine Probleme.

3. Kartengröße anpassen

Sie können über den Link unter dem HTML-Code „Eingebettete Karte anpassen…“ auch weitere Einstellungen vornehmen:

  1. Screenshot: Kartengröße anpassenKartengröße: Wählen Sie aus drei vorgegebenen Abmessungen oder wählen Sie eine individuelle Größe, die z.B. exakt in den gewünschten Bereich Ihrer Website passt.
  2. Vorschau: Sie sehen den gewählten Kartenausschnitt mit den gerade festgelegten Abmessungen.
  3. HTML-Code kopieren: Hier erhalten Sie den angepassten Code, den Sie in Ihre Website einbinden.

Da dies kein Webentwickler-Blog ist, gehe ich nicht weiter auf Frames und den generierten Quellcode ein. Jeder Webdesigner wird den Code in ein paar Details anpassen können, falls er das wünscht.

4. Google Maps mittels der API einbinden

Jetzt wird’s schwieriger, hier sind Webdesigner und Webentwickler gefordert. Sie müssen HTML, JavaScript grundlegend verstehen und über Schreibzugriff auf Ihre Website verfügen (FTP-Zugang).

Im Unterschied zur oben beschriebenen Möglichkeit mittels IFrame hat man zwar alle Möglichkeiten der Anpassung und Erweiterung, doch muss man auch die im zweiten Teil dieses Tutorials beschriebenen Anpassungen ggf. selbst programmieren.

Auch hierzu nur ein kurzer Überblick. Es gibt für Webentwickler viele ausführliche Tutorials zur Einbindung von Google Maps über die Programmierschnittstelle (API). Gute Anlaufstellen sind z.B. das Google-Karten-Blog.

  1. Sie benötigen einen sogenannten Google Map API-Key, eine individuelle Kennung, die nur für Ihr kleines Projekt dient und Google Maps für Ihre Domain freischaltet: http://www.google.de/apis/maps
  2. Sie fügen den ganzen Quellcode, der in den diversen Tutorials erarbeitet wird, mit Ihrem API-Key in ihre Website ein. Der größte Teil ist JavaScript, der HTML-Teil ist nur wenige Zeilen lang.
  3. Sie können diesen Quellcode mit ausreichend JavaScript-Kenntnissen erweitern (es gibt als Anlaufstelle die offiziellen Google Maps API-Seiten und über Suchmaschinen viele Tutorials und Hilfestellungen).
  4. Sie könnten (als Webentwickler) sogar komplette Anwendungen erstellen, die man neudeutsch Mashups nennt. Dies ist von Google erlaubt und werden sogar unterstützt (siehe Nutzungsbedingungen).
  5. Alternativ können Sie den Assistenten von Elmar Eigner nutzen, der Ihnen einen grundlegenden Quellcode unter Einbezug des API-Keys erstellt. Oder Sie beauftragen unsere Agentur.

5. Weitere Informationen

Fazit dieses dritten Tutorials

Sie haben zwei Möglichkeiten, Google Maps nahtlos auf Ihrer Website einzubinden. Eine ganz neue, einfache Variante per IFrame und die aufwendigere Methode mittels der Google-Maps‑API.

Die drei Beiträge aus dieser Reihe „Google Maps nutzen“:

  1. Google Maps von einer Webseite verlinken
  2. Google Maps geht noch weiter!
  3. Google Maps vollständig in die eigene Website einbinden (dieser Beitrag)
Autor-Icon Jan Kurschewitz | Datums-Icon Freitag, 14. September 2007, 8:06 Uhr
Kategorie-Icon Google Maps, Technik, Tutorials
Kommentar-Icon Kommentar schreiben | Trackback einrichten

3 Kommentare zu diesem Beitrag

  1. Kommentar 1
    Autor-Icon Thomas Rühlmann
    Datums-Icon 21. April 2008 um 11:11 Uhr

    Guten Tag,
    als ehemals Abgemahnter von Falk Plan betrachte ich nun Google Maps etwas mißtrauischer, insbesondere beim Blick in die Nutzungsbestimmungen. Dort steht zu lesen, dass eine Einbindung von Google Maps ausschließlich über API zulässig sei. Das bedeutet doch im Umkehrschluß, dass der oben rechts angebote IFRAME-HTML-Code bzw. die Nutzung der angegebenen URL bei eines Kartenausschnitts unzulässig ist und hier Abmahnungen zu befürchten sind, selbst bei einer einfachen Verlinkung, wie Sie sie im Teil 1 Ihres Blogs erläutert haben.

  2. Kommentar 2
    Autor-Icon Jan Kurschewitz (Aysberg)
    Datums-Icon 28. April 2008 um 09:27 Uhr

    Ohne hier eine Rechtsberatung anzubieten: Selbst unser Anwalt wundert sich über die schwammigen Nutzungsbedingungen, weist aber daraufhin, dass die Nutzungsbedingungen nicht „wirksam einbezogen“ sind, da nur über die Hilfeseiten erreichbar.

    Prinzipiell haben Sie Recht mit Ihrer Skepsis und auch wenn Gott und die Welt Google Maps mittels IFRAME verwendet, heißt das nicht, dass das jeder rechtlich einwandfrei macht.

    Andererseits würde sich Google seinen Ruf ruinieren, wenn es erst zur Verwendung anstiftet und dann abmahnt. Doch das hat man bei Falk damals ja auch gedacht…

  3. Kommentar 3
    Autor-Icon Thomas Rühlmann
    Datums-Icon 28. April 2008 um 09:35 Uhr

    Nun – ich werde die von Google angegebene URL lieber ausschließlich in einem neuen Fenster starten. Wenn irgendwann einmal framelose Links verboten werden sollten, dann verlasse ich sowieso den Planeten – in this case the MHV (most horrible vision has become true:

    THE EARTH BELONG TO THE LAWYERS !
    (in Anlehnung an War Of The Worlds) ;-)

Einen Kommentar schreiben

Kommentar hinterlassen