So codierst du Google Maps mit Google Maps JavaScript API

1. Google Maps API – Willkommen: Willkommen zurück im kreativen Millennial-Skillset-Channel Heute zeigen wir Ihnen, wie Sie Google Maps-API in Ihre Website integrieren Zu mir gesellt sich ein guter Freund von mir, Jacob, uns zuvor beigebracht hat, wie man eine Website von Grund auf neu codiert. Er ist Softwareingenieur und heute wird er an dem Kurs teilnehmen. Ich werde zu ihm weitermachen. Hi, Leute. Ich bin Jacob. Ich bin Diplom-Softwareingenieur. Und heute werde ich Ihnen erklären, wie Sie Ihrer Website die Google Maps-Integration hinzufügen können. Dies ist nützlich, wenn Sie vor Ort oder etwas auf Ihrer Website ausgestellt sind, und wenn Sie Projekte verwenden, bei Ort oder etwas auf Ihrer Website ausgestellt sind, und wenn Sie Projekte verwenden denen Kartenintegration hinzugefügt Sie können mit Google Maps einige coole Funktionen nutzen und Ihr Projekt spannender gestalten. Wir werden also HTML-, CSS - und Java-Skripte verwenden, um diese Kartenintegration in Ihr Projekt einzufügen . Ich werde jetzt ein Beispiel auf den Bildschirm bringen , wie das endgültige Projekt aussehen wird. Wir werden damit beginnen, einen Ort auf der Karte anzuzeigen, und dann fügen wir Markierungen hinzu und fügen dann mehrere Markierungen hinzu . Außerdem werden wir herausfinden, wie die Karte angepasst werden kann und auch Go-Codierung hinzugefügt werden kann, damit Sie bestimmte Orte auf der Karte anzeigen können. Dies ist ein äußerst nützliches Tool für Programmierer, Geschäftsinhaber und alle, die Ihrem Projekt eine interaktive Funktion hinzufügen möchten die Ihrem Projekt eine interaktive Funktion . Lass uns loslegen 2. Google Maps – Das Setup: Willkommen in der ersten Klasse. In diesem Kurs werden wir darüber sprechen welche Software wir benötigen, um die Google Maps-Integration im Projekt nutzen zu können . Da wir also die Google Maps JavaScript-API verwenden , mit der Sie Karten mit Ihren eigenen Inhalten und Bildern für die Anzeige auf Webseiten und Mobilgeräten anpassen können, werden wir Visual Studios, die IDE, verwenden werden wir Visual Studios, die IDE, verwenden, um die HTML -, CSS- und JavaScript-Dateien codieren zu können -, CSS- und JavaScript-Dateien Ich habe hier also drei einfache Dateien erstellt, eine HTML-Datei mit Indexpunkten und eine JavaScript-Datei mit Kartenpunkten. Und eine Style-CSS-Datei. Um diese Dateien kurz zu erklären In der Indexdatei wird unser HTML-Code für die Anzeige des Layouts der Webseite verwendet In der JavaScript-Kartendatei wird unser JavaScript-Code gespeichert, um das tatsächliche Laden der Google Maps zu tatsächliche Laden der Google Maps Das Style-CSS wird den Code enthalten , mit dem angezeigt wird, wie die Website aussieht. Im Moment handelt es sich bei dieser Klasse also um eine Zwischenklasse, was bedeutet, dass ich davon ausgehe, dass Sie ein grundlegendes Verständnis der HTML-CSS - und JavaScript-Dateien und ihrer Bedeutung haben ein grundlegendes Verständnis der HTML-CSS - und JavaScript-Dateien und ihrer Bedeutung Wenn Sie sich jedoch nicht sicher sind, möchte ich ein tieferes Verständnis. Ich habe ein weiteres Video auf diesem Kanal, in Ich habe ein weiteres Video auf diesem Kanal erklärt wird, wie man eine Website von Grund auf neu erstellt Um mit der HML-Datei zu beginnen, habe ich ein grundlegendes HTML-Dokument beigefügt das einen Link zu unserer CSS-Datei und auch zu unserer JavaScript-Datei mit dem Code für die Karte enthält Ich habe einen einfachen Header erstellt , um der Website ein gewisses Design zu geben , und auch ein Div hinzugefügt, das die Karte enthält, die später gestaltet wird Aus dem CSS heraus haben wir grundlegendes Styling, nur um der Website ein bisschen Stil zu verleihen der Website ein bisschen Stil zu Wir haben also den Hauptteil der die Hintergrundfarbe, die Breite und den Header hat, der eine leichte Färbung und einige Ränder sowie auch einen leichten Rand hat. Und unten haben wir das Kartendesign, das die Breite der Karte und den Rand für die Karte anzeigt , sodass die Google Maps-Vorlage eine Vorlage für die Breite und Höhe von Google Maps festlegen kann. Und wir haben auch eine O-Script-Datei , in die wir später Code einfügen werden, um die Funktionalität der Karte zu erstellen und Anpassungen und Änderungen an der Funktionalität der Karte zu ermöglichen Anpassungen und Änderungen . Jetzt haben wir also ein grundlegendes Funktions-Setup. Wir sind jetzt bereit, die Google Maps-Integration in die Website hinzuzufügen . In der nächsten Lektion werden wir uns also ansehen, wie man die Google Maps-Integration tatsächlich in das Projekt einfügt , sodass wir damit beginnen können, die Karten hinzuzufügen und mit der Anzeige der Karte zu beginnen. Dazu verwenden wir die Google Maps-API und zeigen, wie man sich für die API anmeldet und auch den Schlüssel und den irrelevanten Code in das Projekt installiert . In diesem Kurs werden wir uns also ansehen, wie mit dem Projekt beginnen können, und den Basiscode definieren , den wir benötigen, bevor wir die Google Maps-Integration in das Projekt hinzufügen können . 3. Google Maps Console (KEY): Willkommen in Klasse zwei. In diesem Kurs werden wir uns die Schritte ansehen, die wir unternehmen müssen, um uns bei der Google Cloud Platform anzumelden , um den ApiKey zu erhalten , damit wir ihn zu unserem Projekt hinzufügen können Der erste Schritt besteht darin, ein Google-Konto zu erstellen, sich bei der Google Cloud Platform anzumelden und dann zur Konsole zu wechseln Sie müssen auch das Bieten in Ihrem Konto aktivieren , um Google Maps verwenden zu können Ich werde Ihnen nicht zeigen, wie Sie diesen Schritt ausführen, aber er ist sehr einfach und nimmt nicht viel Zeit in Anspruch. Der nächste Schritt besteht darin, ein Projekt in der Google Clouds Console zu erstellen , das Google verwendet, damit Sie dem Projekt Ihre Anmeldeinformationen und API-Schlüssel hinzufügen können . Wählen Sie dazu Ihr Projekt aus und klicken Sie auf Neues Projekt . Geben Sie Ihrem Projekt einen Namen und klicken Sie auf Erstellen. Sobald dies erledigt ist, öffnen Einstellungen und gehen Sie zu API und Services. Klicken Sie auf Dashboard und aktivieren Sie API und Dienste. Die beiden APIs, die wir für dieses Projekt verwenden Maps-JavaScript-API für die Kernfunktionalität der Karte sowie die Places-API, die später an einer beliebigen Stelle hinzugefügt werden kann. Dies wird verwendet, um einen Standort in Breiten - und Längengradkoordinaten umzuwandeln Breiten - und Längengradkoordinaten , sodass die Markierung auf der Karte dargestellt werden kann Klicken Sie also auf Maps JavaScript API und aktivieren Sie es. Ich habe diesen Schritt bereits ausgeführt, aber Sie sollten hier eine Schaltfläche zum Aktivieren der API sehen. Das Gleiche gilt für die Places API. Sobald Sie die APIs aktiviert haben, können Sie Anmeldeinformationen erstellen und einen Zugriffsschlüssel erhalten , damit Google Maps in Ihrem Projekt verwendet werden kann. Klicken Sie auf, erstellen Sie Anmeldeinformationen und API-Schlüssel wird automatisch ein API-Schlüssel generiert , den Sie verwenden können. Dieser kann dann kopiert und in Ihr Projekt eingefügt werden, sodass die Karten in Ihrem Projekt implementiert werden können Ich würde empfehlen, den Schlüssel so einzuschränken , dass nur Sie und die Personen, auf die Sie zugreifen möchten, darauf zugreifen können , um sicherzustellen, dass niemand Ihren Zugangsschlüssel unwissentlich verwendet und Ihre Da wir eine Website erstellen, müssen wir HTTP aktivieren Wir können dann die Website-Einschränkungen aktivieren , die wir verwenden möchten. Aktivieren Sie dann die URL der Website, auf der wir Google Maps verwenden möchten . Natürlich müssen Sie den Schlüssel nicht einschränken , können ihn aber nur empfehlen. Sobald dies erledigt ist, können Sie Ihren API-Schlüssel kopieren, dann in das Projekt eingefügt werden kann. Sobald Google Maps online eingerichtet ist, können Sie den Code zu Ihrem Projekt hinzufügen , um mit den Karten zu beginnen. also in Ihrer HTML-Datei Fügen Sie also in Ihrer HTML-Datei einfach ein kurzes Skript hinzu, das Ihren Schlüssel am Ende der URL enthält, sowie eine Callback-Funktion, die definiert, welche Funktion in der Javascript-Datei verwendet wird, um die Karte zuerst einzurichten Um kurz ein wenig darüber zu sprechen , was diese Symbole bedeuten Aus der Quelle wird die Map geladen . Sie enthält den API-Schlüssel und die Callback-Funktion , mit der beim Laden des Projekts die erste Funktion für die Map aufgerufen wird beim Laden des Projekts die erste Funktion für die Map Das A veranlasst den Browser, das Skript gleichzeitig herunterzuladen und auszuführen, während das HTML geladen wird Skript gleichzeitig herunterzuladen und auszuführen während das HTML geladen Wenn das Skript geladen ist, ruft es die in der Callback-Funktion angegebene Funktion Also danke, dass du dir diesen Kurs angesehen hast. In diesem Kurs haben wir uns angesehen, wie Sie sich bei der Google Cow-Plattform anmelden, die entsprechenden APIs aktivieren und unseren Zugriffsschlüssel erhalten und unseren API-Zugriffs-Schlüssel erhalten und ihn gleichzeitig einschränken, um sicherzustellen, dass er nur für die richtigen Zwecke verwendet wird In der nächsten Klasse werden wir uns mit der Definition der Funktion befassen, die beim Laden der HTML-Datei zuerst aufgerufen wird die zur Anzeige der Karte verwendet wird 4. So findest du Google Maps und Locations!: Willkommen in Klasse drei. In diesem Kurs werden wir uns den entsprechenden Code ansehen, der zur Driscriptdatei hinzugefügt werden muss, damit wir unseren ersten Standort auf der Karte anzeigen können Wie wir bereits erwähnt haben , haben wir hier ein Skript, das mit der Map-Dot-JS-Datei verknüpft Unsere Callback-Funktion teilt der HTML-Datei mit, auf welche Funktion zuerst zugegriffen werden soll, wenn die Seite in die Map-Dot-JS-Datei geladen wird Wir haben es Init Map genannt. In der S-Datei haben wir die Funktion Init Map definiert Wir holen uns die Karten-ID aus der HML-Datei und legen fest, dass der Mittelpunkt der Karte angezeigt werden soll Google Maps verwendet dazu Längen- und Breitengradkoordinaten , um den Standort auf der Karte darzustellen Wir haben den Mittelpunkt der Karte so festgelegt, dass er der Standort von Big Ben ist. Wir können auch definieren, wie vergrößert die Karte sein soll. Acht ist ungefähr in der Mitte. Je höher Sie Ihren Zoom haben, desto stärker wird er gezoomt, je weniger Sie ihn haben, desto stärker wird die Karte herausgezoomt die HTML-Datei mit Google Chrome öffnen, können wir jetzt sehen, was wir Google Maps wird deutlich auf dem Bildschirm angezeigt , wobei Big Ben im Mittelpunkt der Karte haben wir noch keine Markierungen hinzugefügt, aber das wird Teil des nächsten Kurses sein. Ich werde den Zoom vergrößern, um ein besseres Bild davon zu bekommen, was auf der Karte angezeigt wird. Jetzt, wo ich das getan habe, können Sie sehen , dass in der Mitte der Karte Big Ben ist. Die Karte ist interaktiv und Sie können sie verschieben, verkleinern und eine Satellitenansicht anzeigen. Ziehen Sie außerdem eine Markierung auf die aktuelle Position und blättern Sie herum. Der Vorteil von Dra-Skripten besteht darin, dass die Karte interaktiv ist, sodass wir uns mit dieser Karte beschäftigen , herumblättern und auch die Designmerkmale der Karte anpassen können. Wir werden uns später mit der Anpassung der Markierungen auf der Karte befassen Also danke, dass du dir diesen Kurs angesehen hast. Wir haben uns den entsprechenden Code angesehen, der zur Eingabe in unsere DRA-Skriptdatei benötigt wird, um den Standort auf der Karte deutlich anzuzeigen und auch, wie man die Karte vergrößern und verkleinern und mit ihr interagieren kann. In der nächsten Lektion werden wir uns ansehen, wie man Markierungen zur Karte hinzufügt, damit wir die Koordinaten des Standorts klar auf der Karte darstellen können die Koordinaten des Standorts klar . 5. So fügst du deine Karte hinzu: Willkommen in der vierten Klasse. In diesem Kurs werden wir uns ansehen, wie man der Karte tatsächlich eine Markierung hinzufügt, sodass die spezifischen Koordinaten des Standorts auf der Karte angezeigt werden können. Um die Markierung zum Projekt hinzuzufügen, müssen wir nur die Maps-JS-Datei bearbeiten, sodass der Index bei HML und der Stil bei CSS gleich bleiben können Ich habe einige geringfügige Änderungen am Code vorgenommen. Ich habe eine Variable verwendet, um die Ortscodes des Punktes zu speichern die Ortscodes des Punktes , den wir auf der Karte zeichnen möchten. Dann setze ich den Mittelpunkt der Karte auf diese Ortskoordinaten. Das Wichtige ist hier hervorgehoben. Wir wollen eine Markierung für die Karte erstellen. Die Google Map API hat dafür eine eingebaute Funktion. Wir setzen einfach die Position der Karte auf die Ortskoordinaten , die wir zeichnen möchten, und definieren dann die Karte, auf der Sie die Koordinate zeichnen möchten In unserem Fall nennen wir es einfach Karte , weil wir die Karte so definiert haben. Sobald das erledigt ist, können Sie anhand dieser roten Markierung hier den Ort Big Ben sehen , der auf der Karte eingezeichnet werden soll , der auf der Karte eingezeichnet Natürlich muss es nicht Big Ben sein. Sie können einfach alle Ortskoordinaten bearbeiten , um den gewünschten Standort zu zeichnen. Danke, dass du dir diesen Kurs angesehen hast. Wir haben gelernt, welcher Code zu unserer Java-Script-Datei hinzugefügt werden muss zu unserer Java-Script-Datei hinzugefügt , um die Markierung des Ortes zu zeichnen , den wir auf der Karte anzeigen möchten . In der nächsten Lektion werden wir uns mit der grundlegenden Anpassung der Karten befassen und wie wir die Kartenmarkierung so ändern können , dass sie ein Bild von allem ist, was wir wollen. 6. Wie du mehrere Marker zur Karte hinzufügst! (KEY!): Willkommen zurück in der sechsten Klasse. In diesem Kurs werden wir uns ansehen, wie Sie mehrere Markierungen hinzufügen der Karte mehrere Markierungen hinzufügen können, sodass Sie verschiedene Immobilien gleichzeitig anzeigen können . Auch hier werden wir nur die Maps in einer JavaScript-Datei bearbeiten , die größtenteils auf demselben Code wie die letzte Klasse basieren wird . In unserem Allocations-Array habe ich weitere Koordinaten hinzugefügt , sodass wir verschiedene Markierungen auf der Karte zeichnen können In diesem Fall habe ich Big Ben, London und Buchanan Palace in einer Zuweisungsmatrix, sodass wir drei Markierungen auf der Karte haben können . Aber das ist unbegrenzt Sie können so viele Markierungen haben, wie Sie möchten. Ich habe gerade die Breiten- und Längengradkoordinaten jeder dieser Landmarken in der Positionsmatrix hinzugefügt . Ich habe den Typ auch auf Info gesetzt, sodass eine Informationsmarkierung angezeigt wird. Aber auch hier kann alles eingestellt werden, was Sie wollen. Um dies zu ändern, müssen Sie nur die Symbolanordnung festlegen und ein neues Symbol hinzufügen. Um mehrere Markierungen zeichnen zu können, benötigen wir eine Schleife mit vier Schlaufen, die das Ort-Array durchläuft und alle Standorte zur Karte hinzufügt. Wie Sie sehen können, habe ich eine vierfache Schleife hinzugefügt , die sich über die gesamte Länge der Standorte schlängelt. In unserem Fall haben wir also drei Standorte, also wird es dreimal in einer Schleife laufen und drei Markierungen auf der Karte zeichnen. Ich werde die Position des ersten Standorts zeichnen bevor ich zum zweiten Ort und dann zum dritten Und für jeden dieser Marker-Drops können wir dieselbe Animation und auch dasselbe Logo verwenden, und diese werden alle auf derselben Karte gezeichnet Wie Sie also sehen können, können wir, wenn ich die Seite lade, die drei Markierungen auf der Karte an drei verschiedenen Stellen sehen . Wie Sie auf der Karte sehen können, haben wir drei Standorte, das sind drei Punkte, die wir eingezeichnet haben Die vier Schleifen haben sich also dreimal für jeden Ort in unserer Ortungsmatrix umrundet dreimal für jeden Ort in unserer Ortungsmatrix und diese Punkte unter Verwendung von Längen- und Breitengrad auf der Karte dargestellt diese Punkte unter Verwendung von Längen- und Breitengrad auf der und Breitengrad auf Wie Sie sehen können, springen die Logos beim Aktualisieren der Seite auf und ab. Dabei wird auch die Animation verwendet , die wir kodiert haben Danke, dass du dir diesen Kurs angesehen hast. Wir haben gelernt, wie man der Karte mehrere Markierungen hinzufügt und auch die Möglichkeit hat, mehr Markierungen hinzuzufügen und die Symbole zu ändern. In der nächsten Lektion werden wir uns ansehen, wie man einen Ort geokodiert, sodass wir nicht den Breiten - und Längengrad jedes Punktes kennen müssen , den wir zeichnen Stattdessen können wir einfach den Standort angeben , der dann von der Google Map API für uns in Längen- und Breitengrad umgewandelt werden sollte für uns in Längen- und Breitengrad , sodass wir uns darüber keine Gedanken machen müssen 7. Wie du deine Karte anpassen kannst! (Größe, Animation, Logo und mehr!): Willkommen zurück zu diesen Kosten. Wir werden uns mit leichten Anpassungen befassen, die wir an der Karte vornehmen können, und wir werden uns ansehen , wie wir das Markersymbol ändern und dem Projekt auch einige coole Animationen hinzufügen können das Markersymbol ändern und dem Projekt auch einige coole Animationen hinzufügen Auch hier bearbeiten wir nur die Maps-Dot-JS-Datei. Ich habe hier einige geringfügige Änderungen am Code vorgenommen. Das erste ist, dass wir die Symbolbasis so eingerichtet haben , dass das Kartenbild aus der Google JavaScript-Beispielbibliothek abgerufen wird, und dann das Symbol als Info Maps-Bild in der Bibliothek festgelegt haben. Ich habe das als Beispiel verwendet, aber Sie müssen diese Bibliothek nicht verwenden. Sie können jedes beliebige Bild verwenden, buchstäblich jedes Bild, das Sie möchten, solange Sie definiert haben, welches Symbol Sie verwenden möchten. Als Beispiel sollten Sie hier Symbole haben, den Markierungspunkt PNG, wenn ich diese Markierung als Markierung für Google Maps festlegen möchte . Alles was wir tun müssen, ist das zu löschen und den Titel einfach auf Mark PNG zu setzen. Möglicherweise müssen Sie die Breite und Höhe dieser Markierung bearbeiten , wenn das Bild zu groß sein wird. Aber im Moment verwende ich JavaScript-Bibliothek von Google als Beispiel. In diesem Abschnitt habe ich ein Array namens Locations erstellt, das jeden einzelnen Ort enthält , den ich auf der Karte zeichnen möchte . Jetzt möchte ich nur noch Big Ben auf der Karte einzeichnen. Also habe ich die Position der Google Maps sowie die Längen- und Breitengrade auf den Standort von Big Ben festgelegt die Längen- und Breitengrade auf den Standort von Big Ben Ich habe auch den Markertyp auf Info gesetzt, was auf diese Icon-Basis hier zurückgeht Ich habe dann die Markierungen erstellt, was weitgehend die gleichen ist wie zuvor. Ich habe jedoch die Position des Standort-Arrays so angegeben , dass sie Big Ben ist. Und auch das Icon-Array soll das Info-Icon sein, das uns eine Informationsmarkierung gibt. Ich habe hier auch einige coole Animationen hinzugefügt , um zu zeigen, wie die Markierung auf die Google-Maps fällt , um einen coolen Effekt zu erzielen und die Karte ein bisschen ansprechender zu gestalten. Wie Sie sehen können, hat das Kartensymbol jetzt die Form eines Auges. Wie ich bereits gesagt habe, muss dies kein Info-Logo sein. Das kann ein beliebiger Marker sein, den du willst. Was cool ist, ist, dass ich die Animation hinzugefügt habe. Wenn ich die Seite aktualisiere, wirst du sehen, wie die Markierung springt, was einen coolen visuellen Effekt ergibt In diesem Kurs haben wir gelernt, wie man das Marker-Logo individuell anpasst und auch die coole Animation hinzufügt, um der Markierung einen schönen visuellen Effekt zu verleihen einen schönen visuellen Effekt zu , wenn sie auf die Karte fällt In der nächsten Lektion werden wir uns ansehen, wie man mehrere Markierungen zur Karte hinzufügt sodass wir mehrere Orte gleichzeitig auf der Karte anzeigen können . 8. GeoCoding Map GeoCodierung! (NUTZUNG!): Also willkommen zu unserer letzten Klasse, Klasse sieben. In diesem Kurs werden wir uns ansehen, wie man einen Standort mithilfe der Geocode-API in Längen- und Breitengradkoordinaten umwandelt Geocode-API in Längen- und Breitengradkoordinaten , sodass diese dann in der Grafik dargestellt werden können Auf diese Weise können wir Punkte auf der Karte zeichnen, bei Anwendungen, bei denen wir deren Koordinaten nicht kennen Dies ist sehr nützlich , wenn Sie den Standort auf der Karte darstellen möchten und die Koordinaten nicht kennen. Anstatt zu versuchen, einen Längen- und Breitengrad zu ermitteln, können Sie die Geocode-API verwenden, um den Standort in Koordinaten umzuwandeln, die dann auf der Karte dargestellt werden können In der Map St JS-Datei habe ich größtenteils dieselben Codes verwendet , habe ich größtenteils dieselben Codes verwendet nur eine einzelne Markierung auf die Karte gezeichnet Ich habe hier einen Standort mit einer Postleitzahl von mindestens zwei ND festgelegt. Sie können diesen Standort jedoch auf alles einstellen , was Sie möchten Die Geocode-API kann diesen Standort besser ermitteln und konvertieren, sodass er auf der Karte dargestellt werden kann Die Geocode-API ist eine weitere API, die von der Karten-API getrennt ist. Aber wie in Klasse zwei besprochen, haben wir dies bereits in der Google-Konsole aktiviert, sodass hier kein Problem auftreten sollte Sobald wir also die Standortvariable festgelegt haben, müssen wir die Geocode-Variable mithilfe des Google Maps-Geocodes festlegen mithilfe des Google Maps-Geocodes Wir rufen hier dann eine Funktion auf, die die Adresse auf den Standort setzt, die hier diese Funktion aufruft, die die Kartenadresse Ich habe hier eine if-Anweisung eingefügt, damit die Website nicht zerstört wird, wenn die Geocode-API die Ladeadresse nicht finden kann die Geocode-API die Ladeadresse nicht finden Stattdessen wird der Fehler einfach protokolliert. Wenn es erfolgreich ist, wird der Breitengrad für den Standort berechnet und in der Variablen gespeichert , ebenso wie für den Längengrad. Diese Variablen werden dann als Ortskoordinaten für den Mittelpunkt der Karte verwendet. Ich habe dann eine Markierung gezeichnet , deren Position auf den Längen- und Breitengrad der Koordinaten festgelegt ist . Dies kann dann in der Grafik dargestellt werden. Auch wenn wir hier vielleicht nur ein einfaches Beispiel verwenden, hat es das Potenzial, für viele Funktionen verwendet zu werden, z. B. die Eingabe eines Benutzers für eine Adresse , nach der er suchen möchte, sie zu konvertieren und sie dann auf der Karte darzustellen Mit einer ähnlichen Technik wie in unserer letzten Klasse können wir hier auch eine Schleife verwenden, um mehrere Markierungen auf die Karte zeichnen zu können Der Standort muss keine Postleitzahl sein. Es kann sich um einen Straßennamen, eine Stadt oder einen Straßennamen und eine Stadt und eine Postleitzahl handeln, um eine bestimmte Adresse anzugeben. Dies ist dieselbe Technologie , die verwendet wird, wenn Sie auf Google Maps nach einem Ziel suchen , und es wird eine PIN angezeigt. Wie Sie sehen können, werden beim Aktualisieren der Seite die für einen Ort definierten Postleitzahlen dargestellt und auf der Karte eine Markierung für diese Postleitzahl eingezeichnet . Also danke, dass du dir Class Seven angesehen hast. In diesem letzten Kurs haben wir gelernt, wie man einen beliebigen Ort nimmt und der Grafik zeichnet, ohne die Längen- und Breitengradkoordinaten zu kennen . Dies kann für jeden beliebigen Ort verwendet werden und kann so erweitert werden, dass Standorte aus einer Datenbank, Benutzereingaben und sogar dem gleichzeitigen Zeichnen mehrerer Markierungen übernommen werden Benutzereingaben und sogar . 9. Das Kursprojekt!: Willkommen zum Klassenprojekt. Dafür möchte ich, dass du das, was du im heutigen Kurs gelernt hast, verwendest , um die Karte auf deine Website zu bringen und sie anzupassen, indem du mehrere Markierungen hinzufügst , genau wie wir es im heutigen Kurs gemacht haben. Der gesamte Code aus dem heutigen Kurs wurde auf GitHub veröffentlicht. Wenn Sie also nicht weiterkommen, schauen Sie sich den Code an und zögern Sie nicht, Ihre Fragen unten zu stellen. Am Ende dieses Klassenprojekts Sie also die Karte auf Ihrer Website hinzu und fügen dann mehrere Markierungen um all den verschiedenen Personen, die Ihre Website besuchen , verschiedene Orte zu zeigen . Also probieren Sie es aus und wenn Sie nicht weiterkommen, vergessen Sie nicht, einen Git-Hub zu verwenden oder unten eine Frage zu stellen. 10. Nachfassen und Abschluss- Danksagung: Ich danke Ihnen allen, dass Sie sich diesen Kurs angesehen haben. Ich hoffe, Sie haben viel gelernt und ich hoffe, dass Sie diese Tools für Ihre eigene Website nutzen können . Abschließend habe ich Ihnen heute beigebracht, wie Sie Google Maps mithilfe von HML-CSS und JavaScript in Ihre Website integrieren mithilfe von HML-CSS und JavaScript in Ihre Website Ich habe Ihnen gezeigt, wie Sie Standorte mithilfe von Markierungen anzeigen, wie Sie die Karten anpassen und wie Sie Google Geocoder verwenden, und wie Sie Google Geocoder verwenden um Kundenstandorte auf der Karte anzuzeigen Also gib bitte dem Klassenprojekt und sieh dir meinen anderen Kurs im Channel an, in dem ich dir gezeigt habe , wie man mit CSS und HTML eine Website von Grund auf neu erstellt. Und danke fürs Zuschauen.