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:
- ružičasta:
pink-dot.png - žuta boja:
yellow-dot.png - 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