Kako promijeniti boju oznaka Google Maps s JavaScriptom

Neka budu ružičaste, plave, zelene, žute ili ljubičaste!

Oznaka Google Maps prema zadanim je postavkama crvene boje. Ovaj će članak pokazati kako na Google Maps dodati različite oznake u boji. Dakle, krenimo. ?

1. Učitajte Google Maps

Stvorite HTML datoteku koja učitava Google Maps slijedeći službene dokumente API-ja Google Maps: Hello World.

Vaš će kôd izgledati otprilike poput isječka koda u nastavku.

Napomena: Ne zaboravite promijeniti YOUR_API_KEYsvoj stvarni API ključ Google Maps.

2. Dodajte različite markere u boji

Da bismo dodali plavu oznaku u boji, moramo promijeniti ikonu oznake. To se postiže dodavanjem svojstva ikone i određivanjem URL-a za nju kao u nastavku.

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

Imajte na umu da blue-dot.pngna kraju URL-a navodimo da bismo dobili plavu oznaku. Da biste dodali zeleni marker, jednostavno ga promijenite u green-dot.pngtako da bude URL //maps.google.com/mapfiles/ms/icons/green-dot.png.

Dostupne su još neke boje:

  1. ružičasta: pink-dot.png
  2. žuta boja: yellow-dot.png
  3. ljubičasta: purple-dot.png

Da biste dobili URL više ikona markera, pogledajte ovu web stranicu.

3. Umotajte u funkciju dodavanja markera

Da bi kod bio čišći, možemo definirati addMarkerfunkciju koja uzima latLngi colormarker. Imajte na umu da markere dodane u global markersArrayčuvamo u slučaju da kasnije trebamo izvršiti bilo kakve operacije na markerima.

Otvorite HTML datoteku u pregledniku. To bi trebalo izgledati ovako:

Potpunu konačnu verziju koda možete dobiti ovdje. Molimo vas da mi javite kako to ide u komentarima ispod.

Slobodno pogledajte još jedan vodič za Google Maps koji sam napisao:

Implementirajte klik na JavaScript Google Map da biste dodali oznake koje se mogu povući s polilinom