Sådan ændres farven på Google Maps-markører med JavaScript

Gør dem lyserøde, blå, grønne, gule eller lilla!

Google Maps-markøren er som standard rød i farven. Denne artikel viser, hvordan du tilføjer forskellige farvemarkører til Google Maps. Så lad os komme i gang. ?

1. Indlæs Google Maps

Opret en HTML-fil, der indlæser Google Maps ved at følge officielle Google Maps API-dokumenter: Hello World.

Din kode vil se ud som kodestykket nedenfor.

Bemærk: Husk at skifte YOUR_API_KEYtil din aktuelle Google Maps API-nøgle.

2. Tilføj forskellige farvemarkører

For at tilføje en blå farvemarkør skal vi ændre ikonet for markøren. Dette gøres ved at tilføje en ikonegenskab og angive en URL til den som nedenfor.

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

Bemærk, at vi angiver blue-dot.pngi slutningen af ​​URL'en for at få en blå markør. For at tilføje en grøn markør skal du blot ændre den til, green-dot.pngså URL'en bliver //maps.google.com/mapfiles/ms/icons/green-dot.png.

Nogle andre tilgængelige farver:

  1. lyserød: pink-dot.png
  2. gul: yellow-dot.png
  3. lilla: purple-dot.png

For at få URL'en til flere markørikoner henvises til dette websted.

3. Pak ind i tilføj markørfunktion

For at gøre koden renere kan vi definere en addMarkerfunktion, der tager ind latLngog coloraf markøren. Bemærk, at vi gemmer de markører, der er tilføjet i a global markersArray, hvis vi har brug for at udføre handlinger på markørerne senere.

Åbn HTML-filen i browseren. Det skal se sådan ud:

Du kan få den fulde endelige version af koden herfra. Lad mig vide, hvordan det går i kommentarerne nedenfor.

Du er velkommen til at tjekke en anden Google Maps-tutorial, som jeg har skrevet:

Implementér klik på JavaScript Google Map for at tilføje trækbare markører med polyline