So ändern Sie die Farbe von Google Maps-Markern mit JavaScript

Machen Sie sie rosa, blau, grün, gelb oder lila!

Standardmäßig ist die Google Maps-Markierung rot. In diesem Artikel wird gezeigt, wie Sie Google Maps verschiedene Farbmarkierungen hinzufügen. Also lasst uns anfangen. ?

1. Laden Sie Google Maps

Erstellen Sie eine HTML-Datei, die Google Maps lädt, indem Sie die offiziellen Dokumente der Google Maps API befolgen: Hello World.

Ihr Code sieht ungefähr so ​​aus wie das folgende Codefragment.

Hinweis: Denken Sie daran YOUR_API_KEY, Ihren tatsächlichen Google Maps-API-Schlüssel zu ändern .

2. Fügen Sie verschiedene Farbmarkierungen hinzu

Um eine blaue Farbmarkierung hinzuzufügen, müssen wir das Symbol der Markierung ändern. Dazu fügen Sie eine Symboleigenschaft hinzu und geben eine URL dafür an (siehe unten).

icon: { url: "//maps.google.com/mapfiles/ms/icons/blue-dot.png" }

Beachten Sie, dass wir blue-dot.pngam Ende der URL angeben , um eine blaue Markierung zu erhalten. Um eine grüne Markierung hinzuzufügen, ändern Sie sie einfach in, green-dot.pngsodass die URL lautet //maps.google.com/mapfiles/ms/icons/green-dot.png.

Einige andere Farben erhältlich:

  1. Rosa: pink-dot.png
  2. Gelb: yellow-dot.png
  3. lila: purple-dot.png

Die URL weiterer Markierungssymbole finden Sie auf dieser Website.

3. Schließen Sie die Funktion zum Hinzufügen von Markern an

Um den Code sauberer zu machen, können wir eine addMarkerFunktion definieren , die den Marker einnimmt latLngund colorvon ihm entfernt. Beachten Sie, dass wir die hinzugefügten Markierungen in einem globalen Speicher speichern, markersArrayfalls wir später Operationen an den Markierungen ausführen müssen.

Öffnen Sie die HTML-Datei im Browser. Es sollte so aussehen:

Die vollständige Endversion des Codes erhalten Sie hier. Bitte lassen Sie mich in den Kommentaren unten wissen, wie es geht.

Schauen Sie sich auch ein anderes Google Maps-Tutorial an, das ich geschrieben habe:

Implementieren Sie einen Klick auf JavaScript Google Map, um ziehbare Markierungen mit Polylinie hinzuzufügen