Google Maps ist eines der besten Dienstprogramme, die jemals im Web angeboten wurden. Es ist zur Standardmethode geworden, dass Personen online Wegbeschreibungen abrufen, Satelliten- und Geländebilder anzeigen und andere kartenbezogene Aufgaben ausführen können.
Es gibt eine Reihe von Gründen, aus denen Sie eine Google Map in Ihre Webseite einbetten möchten, sei es zu funktionalen Zwecken, z. B. um Benutzer zu Ihrem physischen Standort zu führen, oder aus ästhetischen Gründen, z. B. zur Verwendung einer Karte für eine Hintergrundgrafik. Heute betrachten wir zwei Möglichkeiten, wie Sie diese Aufgabe erledigen können: den schnellen und einfachen Weg und die leistungsfähige, flexible API-Route.
Einbetten einer Google Map
Das erste, was wir lernen werden, ist eine einfache und direkte Einbettung einer Google-Karte. Die Funktionalität hier ist ziemlich begrenzt, aber es ist sehr einfach.
Als erstes müssen Sie einfach zu Google Maps gehen, als würden Sie nach Wegbeschreibungen suchen. Geben Sie einfach die Adresse ein, an der die Karte beginnen soll.
Klicken Sie nun auf das kleine Verknüpfungssymbol oben rechts auf dem Bildschirm. Es sollte ein kleines Fenster mit einem reinen Link und einem HTML-Snippet erscheinen. Kopieren Sie das zweite in Ihre Zwischenablage und fügen Sie es in ein HTML-Dokument ein.
Das HTML
Das ist alles dazu! Dies sollte Ihnen eine Live-Karte auf Ihrer Webseite geben. Wahrscheinlich möchten Sie jedoch niemals den Code einfügen und erledigen, sondern stattdessen Ihren Anforderungen entsprechend anpassen.
Sehen wir uns dazu den Rohcode an, der sich ergibt:
Das sieht zwar nach einem großen Durcheinander aus, ist aber ziemlich einfach zu sortieren. Die Links sind wirklich das Ergebnis dieses bösen Codes, also werfen wir ihn nur aus dem Beispiel heraus. Nun sieht der Code viel einfacher aus.
Wir können hier einige grundlegende Steuerelemente für den Inline-Stil sehen. Zunächst einmal versuchen wir, die Karte auf 600px zu vergrößern. Wir können das einfach in ein div einwickeln und es zentrieren. Ich habe auch die Farbe des Links am Ende in Weiß geändert.
Sagen wir, wir wollten ein bisschen mehr Spaß damit haben. Lassen Sie uns den letzten Link vollständig aufheben und unsere Breite so einstellen, dass sie sich über die gesamte Seite erstreckt. Der Code dafür ist schön und prägnant.
Vollbild: Der schnelle und schmutzige Weg
Der obige Trick ist perfekt, um eine Live-Karte in Ihre Kontaktseite einzubetten. Angenommen, Sie wollten die Karte eher zu einem Design-Feature als zu einem Dienstprogramm machen. Es ist ziemlich einfach, dieselbe Technik zu verwenden und die Karte über den gesamten Bildschirm zu strecken.
Das HTML
Erstellen Sie zunächst zwei Divs, eines, das alle Grafiken, Texte usw. und ein anderes für die Karte enthalten kann. Ich habe etwas grundlegenden Text für den Overlay-Bereich eingefügt und meine Karte in das zweite Div eingefügt. Beachten Sie, dass ich den Link-Bereich am Ende des eingebetteten Links sowie die Größenstile am Anfang des Links entfernt habe.
Das ist wirklich alles, was wir brauchen. Lassen Sie uns zu unserem CSS springen, damit alles schön aussieht und es richtig stapelt.
Das CSS
Als erstes sollten Sie den iframe in unserem map div als Ziel festlegen und die Höhe und Breite auf 100% setzen. Dadurch wird sichergestellt, dass unsere Karte sich über die gesamte Größe des Browserfensters erstreckt.
Update: Dies funktioniert in Safari, aber es stellt sich heraus, dass Firefox ein Div in 100% Höhe anzeigt, ist schwieriger als ich dachte. Lesen Sie diesen Artikel für Details.
Als Nächstes gestalten wir die Überlagerung. Der Schlüssel hier ist die Einstellung Position Eigentum an absolutDadurch wird es aus dem normalen Dokumentenfluss gezogen und auf der Karte platziert. Von hier aus können wir es gestalten und verschieben.
Ich wollte einen leicht transparenten schwarzen Balken, also habe ich ihn benutzt rgba auf 90% Deckkraft eingestellt. Von hier aus habe ich etwas Rand hinzugefügt und die Schriftarten für beide Text-Tags mit CSS-Kurzschrift festgelegt.
Werde kreativ
Sie können die Karte wie jedes andere Element auf der Seite behandeln. Experimentieren Sie mit der Änderung der Form, dem Anwenden von Effekten und allem, was Sie sonst noch machen können!
Die Google Maps-APIs
Wir haben die Oberfläche von Google Maps auf Ihrer Website kaum zerkratzt. In der Tat verfügt Google über eine ganze Reihe von APIs, die Sie beim Strukturieren, Gestalten und Einbetten von stark angepassten Versionen ihrer Karten unterstützen.
Die obige iframe-Methode macht Spaß und ist einfach, aber der beste Weg zum Einbetten von Karten in Ihre Website ist wahrscheinlich die JavaScript-API. Auf diese Weise müssen Sie zum Einbetten einer Map nur ein Div mit einer bestimmten ID erstellen, z.
Dann springen Sie in Ihr JavaScript, rufen eine Funktion auf, richten einige Optionen ein, speichern diese in einer Variablen und erstellen die Map mit der ID aus dem HTML-Code oben.
Die API bietet Ihnen eine Tonne von Optionen für Einstellungen wie Zoomstufe und welche Steuerelemente sichtbar sind. Sie können die kleinen Kartenmarkierungen sogar mit Ihren eigenen Bildern anpassen.
API-Tutorials
Wenn Sie mit den Google Maps-APIs beginnen möchten, finden Sie hier einige Links, die Sie unbedingt besuchen möchten.
- Offizielles Google JavaScript API-Tutorial
- Wade Hammes: Einrichten einer Google Map als Hintergrund Ihrer Website
Statische Karten
Ich möchte keine interaktive Karte? Lesen Sie die Dokumentation zum Hinzufügen einer statischen Karte.Viele der Funktionen sind identisch, das Ergebnis ist lediglich ein nicht bewegliches Bild und keine echte Karte, mit der Benutzer spielen können.
Fazit
Fazit: Wenn Sie ohne viel Aufwand eine Google Map auf Ihrer Website erstellen möchten, führen Sie die oben genannten Schritte aus, um die iframe-Route aufzurufen. Ihre Kontrolle über die Karte ist begrenzt, aber Sie können viel Spaß daran haben, wie Sie die Karte in die Seite einbetten. Wenn Sie mehr Funktionen und Flexibilität benötigen, registrieren Sie sich für einen kostenlosen API-Schlüssel und gehen Sie die JavaScript-Route.
Hinterlassen Sie unten einen Kommentar und zeigen Sie uns alle Seiten, die Sie mit Google Maps erstellt haben. Welche Techniken und Ressourcen haben Sie als hilfreich empfunden?