Cum se schimbă culoarea markerilor Google Maps cu JavaScript

Faceți-le roz, albastru, verde, galben sau violet!

Cum se schimba culoarea markerilor Google Maps cu JavaScript

În mod implicit, marcatorul Google Maps are culoarea roșie. Acest articol va arăta cum să adăugați diferite markere de culoare la Google Maps. Asadar, haideti sa începem. ?

1. Încărcați Google Maps

Creați un fișier HTML care încarcă Google Maps urmând Documente oficiale API Google Maps: Hello World.

Codul dvs. va arăta ca fragmentul de cod de mai jos.

Notă: Nu uitați să vă schimbați YOUR_API_KEY la cheia dvs. API Google Maps reală.

2. Adăugați diferite markere de culoare

Pentru a adăuga un marker de culoare albastră, trebuie să schimbăm pictograma markerului. Acest lucru se realizează prin adăugarea unei proprietăți pictogramă și specificarea unei adrese URL pentru aceasta, ca mai jos.

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

Rețineți că specificăm blue-dot.png la sfârșitul adresei URL pentru a obține un marker albastru. Pentru a adăuga un marker verde pur și simplu schimbați-l în green-dot.png astfel încât adresa URL să fie http://maps.google.com/mapfiles/ms/icons/green-dot.png .

Alte câteva culori disponibile:

roz: pink-dot.png
galben: yellow-dot.png
Violet: purple-dot.png

Pentru a obține adresa URL a mai multor pictograme de marcare, consultați acest site web.

3. Înfășurați funcția de adăugare a markerului

Pentru a face codul mai curat, putem defini un addMarker funcție care preia latLng și color a markerului. Rețineți că stocăm markerii adăugați în a global markersArray în cazul în care trebuie să efectuăm mai târziu orice operație pe markere.

Deschideți fișierul HTML în browser. Ar trebui să arate astfel: