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_KEY
til 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.png
i 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.png
så URL'en bliver //maps.google.com/mapfiles/ms/icons/green-dot.png
.
Nogle andre tilgængelige farver:
- lyserød:
pink-dot.png
- gul:
yellow-dot.png
- 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 addMarker
funktion, der tager ind latLng
og color
af 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