So verwenden Sie das Google Maps API - Screencast

Ihr Kunde schickt Ihnen also eine E-Mail und fragt Sie: "Können Sie eine dieser auffälligen Karten auf meine Kontaktseite setzen, damit die Benutzer unser Gebäude tatsächlich aus der Sicht eines Satelliten sehen können?". Sie haben Google Maps häufig verwendet, es gibt jedoch nur ein Problem: Sie haben keine Ahnung, wie Sie die API verwenden. Holen Sie Ihren Löffel heraus und graben Sie hinein!

* Klicken Sie auf den Vollbild-Umschalter.

Schritt 1: Erhalten Sie einen eindeutigen API-Schlüssel

Wenn Sie den Quellcode herunterladen, der in diesem Artikel enthalten ist, könnten Sie feststellen, dass er auf Ihrer Website nicht funktioniert. Der Grund ist, dass Google von allen Benutzern verlangt, einen eindeutigen "API-Schlüssel" für jede Website zu erhalten, die Google Maps implementiert.

Hab niemals Angst. Sie ist zu 100% kostenlos und dauert etwa dreißig Sekunden, um sich anzumelden. Besuchen Sie zunächst die Anmeldeseite von Google und geben Sie die URL Ihrer Website ein. Machen Sie sich keine Sorgen, einen bestimmten Pfad hinzuzufügen. Die Root-URL umfasst alle Seiten, die Teil dieser Domäne sind. Stimmen Sie den Nutzungsbedingungen zu und klicken Sie auf "API generieren"..

Das ist es! Die Seite, zu der Sie umgeleitet wurden, enthält Ihren eindeutigen Schlüssel sowie eine Beispielseite, die als Absturzkurs dient. Ihr Schlüssel wird ungefähr so ​​aussehen:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

Sie finden auch einen Skriptpfad, der folgendermaßen aussehen wird:

Ihre werden sich von meinen unterscheiden, da sie Ihren eigenen Schlüsselwert enthalten. Kopieren Sie dies und fügen Sie es in den Kopfbereich Ihres Dokuments ein.

Möglicherweise möchten Sie den Link zur API-Dokumentation mit einem Lesezeichen versehen. Sie beziehen sich zweifellos darauf, wie sich Ihre Fähigkeiten entwickeln.

Schritt 2: Einrichten Ihres HTML-Codes

Der Einfachheit halber erstellen wir ein Layout mit nackten Knochen. Fügen Sie im body-Element Ihres Dokuments Folgendes hinzu.

In einer realen Situation sollten Sie das Styling in eine externe Datei verschieben (wie im Video). Die Werte für Höhe und Breite werden von der API verwendet, um die Abmessungen Ihrer Karte zu bestimmen. Keine Sorge, nichts wird abgeschnitten.

Schritt 3: Javascript

Fügen Sie als Nächstes der Javascript-Datei Folgendes hinzu. Überprüfen Sie es ein wenig und fahren Sie dann fort.

 $ (function () // wenn das Dokument zur Bearbeitung bereit ist. if (GBrowserIsCompatible ()) // wenn der Browser mit var map = document.getElementById ("myMap") von Google Map kompatibel ist; // Get div Element var m = new GMap2 (map); // neue Instanz der GMap2-Klasse und Pass an unserer Div-Position m.setCenter (new GLatLng (36.158887, -86.782056), 13); // Breiten-, Längen- und Breitengrad übergeben Zoomstufe. else alert ("Ihr Browser ist nicht würdig."););

Um diesen Code Zeile für Zeile zu übernehmen:

• Wenn das Dokument zur Bearbeitung bereit ist, führen Sie den Code innen aus. Dies ist eine jQuery-Syntax, aber jQuery ist überhaupt nicht erforderlich. Sie können Ihrem body-Element auch einfach ein "onLoad ()" -Attribut hinzufügen - obwohl dies unordentlich ist.
• Wenn der Browser, von dem aus der Benutzer auf die Karte zugreift, nicht mit der API kompatibel ist, zeigen Sie eine Warnmeldung an (siehe unten). Ansonsten führe den Code aus.
• Erstellen Sie eine Variable mit dem Namen "map" und teilen Sie ihr mit, das Div zu finden, das die Map enthalten soll.
• Als Nächstes erstellen Sie eine Variable mit dem Namen "m" und machen Sie sie mit einer neuen Instanz der Klasse "GMap2" gleich. Übergeben Sie in der Klammer die soeben erstellte "map" -Variable
• Legen Sie schließlich einen Mittelpunkt fest, damit die Karte weiß, was angezeigt werden soll. Dazu erstellen wir eine neue Instanz der Klasse "GLatLng" und übergeben die Breiten- und Längenwerte. Hier können Sie die entsprechenden Werte auswählen. In meinem Fall habe ich die Koordinaten für meine Heimatstadt festgelegt. Danach können Sie optional eine Zoomstufe eingeben - die ich auf "13" eingestellt habe..

Allein mit diesem Code erhalten Sie eine grundlegende Karte, die möglicherweise vollständig für Ihre Anforderungen geeignet ist. Wenn Sie jedoch auch die Funktionen "Zoom" und "Kartenmodus" implementieren möchten, lesen Sie weiter.

Schritt 4: Unsere Karte verfeinern

Es gibt buchstäblich Dutzende von Funktionen, die Sie Ihrer Karte hinzufügen können. Wir gehen ein paar davon durch. Zunächst implementieren wir eine Zoomleiste, mit der die Benutzer schrittweise hinein- oder herauszoomen können.

 m.addControl (neues GLargeMapControl ())

Hier nehmen wir unsere Karte und fügen ein neues Steuerelement namens "GLargeMapControl" hinzu..

Als Nächstes fügen wir eine Funktion hinzu, mit der die Benutzer den gewünschten Kartenmodus auswählen können - Normal, Satellitenansicht oder Hybrid.

 var c = new GMapTypeControl (); // Kartenmodi wechseln m.addControl (c);

• Erstellen Sie eine Variable mit dem Namen "c" und machen Sie sie mit einer neuen Instanz der Klasse "GMapTypeControl" gleich.
• Fügen Sie ein neues Steuerelement hinzu und übergeben Sie "c"..

Wenn Sie Ihren Browser aktualisieren, sehen Sie, dass der Benutzer die Möglichkeit hat, seinen Anzeigemodus zu wählen. Was aber, wenn Sie den Standardmodus einstellen möchten? In solchen Fällen würden Sie "setMapType" verwenden..

 m.setMapType (G_SATELLITE_MAP);

Bei der Definition des Standardmodus haben Sie drei Möglichkeiten.

• G_SATELLITE_MAP
• G_NORMAL_MAP
• G_HYBRID_MAP

Du bist fertig!

Das war nicht zu schwer, oder? Es gibt einige spezifische Klassennamen, die Sie sich merken oder für spätere Referenz notieren müssen. Abgesehen davon ist es auffallend einfach, eine solche erweiterte Karte in Ihre Websites zu integrieren.

Warum implementieren Sie dies nicht für eines Ihrer Template-Designer in eines der von ThemeForest verkauften Designs?

Vor ein paar Tagen haben wir ein Tutorial veröffentlicht, das Ihnen zeigt, wie Sie viele APIs kombinieren - einschließlich Google Maps. Aber viele von euch wussten nicht genug, um loszulegen. Hoffentlich hilft das. Nachdem Sie sich mit dieser API befasst haben, können Sie sich einige Kopfschmerzen ersparen und die Hilfe einer PHP-Klasse namens Phoogle in Anspruch nehmen. Ich denke, es ist am besten, zuerst den richtigen Weg zu lernen, aber jetzt, wo Sie… einige Ecken geschnitten haben! Bis nächste Woche.

Zusätzliche Ressource

• 

  So erstellen Sie ein Mashup durch Kombinieren von 3 verschiedenen APIs

  In diesem Lernprogramm erfahren Sie, wie Sie ein Mashup aus drei verschiedenen APIs erstellen, einschließlich der Integration in Google Maps.

  Artikel besuchen

• Abonnieren Sie den RSS-Feed und den Video-Feed für mehr tägliche Web-Entwicklungsberichte und -artikel.