Jak mogę zmienić kolor znacznika Google Maps?

167

Używam interfejsu API Map Google do tworzenia mapy pełnej znaczników, ale chcę, aby jeden znacznik wyróżniał się spośród innych. Myślę, że najłatwiej byłoby zmienić kolor markera na niebieski zamiast czerwonego. Czy to prosta rzecz, czy muszę jakoś stworzyć zupełnie nową ikonę? Jeśli muszę utworzyć nową ikonę, jaki jest najłatwiejszy sposób, aby to zrobić?

abeger
źródło
2
Możesz sprawdzić ten post z wczoraj: stackoverflow.com/questions/2467720/ ...
Daniel Vassallo
a może lepszy post stackoverflow.com/questions/7095574/ ...
Faizan

Odpowiedzi:

45

Ponieważ mapy v2 są przestarzałe, prawdopodobnie interesują Cię mapy v3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

Mapy v2:

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

Miałbyś jeden zestaw logiki wykonujący wszystkie „zwykłe” piny, a inny, który wykonuje „specjalne” piny, używając nowego zdefiniowanego znacznika.

Kevin
źródło
24
Uwaga dla przyszłych czytelników: to dotyczy interfejsu API Map Google w wersji 2, który został wycofany. Jeśli używasz wersji 3, musisz szukać gdzie indziej.
priestc
12
Kliknąłem na pierwszy link, ctrl-f dla „kolor”: brak wyników. Byłoby wspaniale dodać więcej szczegółów do odpowiedzi, aby faktycznie odpowiedzieć na pytanie. OP konkretnie pyta, czy jest możliwa zmiana koloru bez tworzenia nowej ikony.
qwertzguy
125

W wersji 3 interfejsu API Map Google najłatwiejszym sposobem jest pobranie niestandardowego zestawu ikon, takiego jak ten, który stworzył tutaj Benjamin Keen:

http://www.benjaminkeen.com/?p=105

Jeśli umieścisz wszystkie te ikony w tym samym miejscu co strona mapy, możesz pokolorować znacznik, używając po prostu odpowiedniej opcji ikony podczas jego tworzenia:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

Jest to bardzo łatwe i właśnie takiego podejścia używam w projekcie, nad którym obecnie pracuję.

Sean McMains
źródło
6
Ta odpowiedź jest niesamowita. Byłem smutny, że zaakceptowana odpowiedź dotyczy V2, ale na szczęście przewijanie w dół opłaciło się. Dzięki!
Adam Tuttle
Stworzyłem wersję, która nie opiera się na obrazach: stackoverflow.com/a/23163930/1689770
Jonathan
49

MapIconMaker: biblioteka dla Google Maps v2

Jednym ze sposobów jest użycie MapIconMaker ( deadlink ). Jest przykładem tutaj (DeadLink). Domyślne ikony Map Google mają szerokość 20 pikseli i wysokość 34 pikseli, więc możesz użyć czegoś takiego do emulacji:

var newIcon = MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: "#0000FF", cornercolor:"#0000FF"});
var marker = new GMarker(map.getCenter(), {icon: newIcon});

Możesz nawet zawinąć go w jakąś funkcję, aby jeszcze bardziej ułatwić sobie pracę:

function getIcon(color) {
    return MapIconMaker.createMarkerIcon({width: 20, height: 34, primaryColor: color, cornercolor:color});
}

Tego osobiście używam do wszystkich tworzonych przeze mnie markerów. Wolę mieć możliwość zmiany kolorów dla kaprysu.

Aktualizacja: Domyślna ikona w kolorze Hex to „# FE7569”. Możesz także ustawić Obraz na Markerze zamiast tworzyć nowy Marker z nową ikoną. Więc jeśli chcesz, aby funkcja się wyróżniała, możesz skorzystać z czegoś takiego, używając funkcji powyżej:

function highlightMarker(marker, highlight) {
    var color = "#FE7569";
    if (highlight) {
        color = "#0000FF";
    }
    marker.setImage(getIcon(color).image);
}

StyledMarker: biblioteka dla Map Google v3

Ponieważ V2 został kiedyś zastąpiony przez V3, pomyślałem, że powinienem zaktualizować tę odpowiedź. Utworzyłem bibliotekę niestandardowych markerów, którą można znaleźć w bibliotece narzędzi V3 tutaj (martwe łącze). Pozwala na różne kolory i kształty, a także możesz umieścić tekst na markerze. Działa przy użyciu interfejsu API Google Charts, który zawiera metody tworzenia znaczników typu Google Maps. Jeśli wolisz bezpośrednio korzystać z interfejsu API Google Charts, zajrzyj do kodu źródłowego.

Problem w tej bibliotece polega jednak na tym, że dba ona o zdefiniowanie klikalnych obszarów tych obrazów znaczników za Ciebie, więc na przykład dłuższy bąbelek z tekstem będzie miał klikalne regiony, których się spodziewasz, jak w tym przykładzie (martwe łącze).

Pion
źródło
3
Wygląda na to, że jest to zgodne tylko z GMaps API v2?
Tigraine
7
@Tigraine Stworzyłem zupełnie nową bibliotekę do użycia w wersji 3 o nazwie „StyledMarker”, którą można znaleźć w Bibliotece narzędzi w wersji 3: code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Bob
spójrz na odpowiedź Seana
McMainsa
@Matt Pierwotnie tak, to była tylko wersja v2. Od tego czasu zaktualizowałem, aby uwzględnić rozwiązanie v3
Bob
FYI, „setImage” nie jest funkcją rynku w Google Maps API v3. Właściwą funkcją do użycia jest „setIcon”.
Nick Bork
39

wprowadź opis obrazu tutaj wprowadź opis obrazu tutaj Wygląd materiału

EDYCJA MARZEC 2019 teraz z automatycznym kolorem pinezek

CZYSTY JAVASCRIPT, BEZ OBRAZÓW, WSPIERA ETYKIETY

nie polega już na wycofanym interfejsie Charts API

    var pinColor = "#FFFFFF";
    var pinLabel = "A";

    // Pick your pin (hole or no hole)
    var pinSVGHole = "M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z";
    var labelOriginHole = new google.maps.Point(12,15);
    var pinSVGFilled = "M 12,2 C 8.1340068,2 5,5.1340068 5,9 c 0,5.25 7,13 7,13 0,0 7,-7.75 7,-13 0,-3.8659932 -3.134007,-7 -7,-7 z";
    var labelOriginFilled =  new google.maps.Point(12,9);


    var markerImage = {  // https://developers.google.com/maps/documentation/javascript/reference/marker#MarkerLabel
        path: pinSVGFilled,
        anchor: new google.maps.Point(12,17),
        fillOpacity: 1,
        fillColor: pinColor,
        strokeWeight: 2,
        strokeColor: "white",
        scale: 2,
        labelOrigin: labelOriginFilled
    };
    var label = {
        text: pinLabel,
        color: "white",
        fontSize: "12px",
    }; // https://developers.google.com/maps/documentation/javascript/reference/marker#Symbol
    this.marker        = new google.maps.Marker({
        map: map.MapObject,
        //OPTIONAL: label: label,
        position: this.geographicCoordinates,
        icon: markerImage,
        //OPTIONAL: animation: google.maps.Animation.DROP,
    });
Jonathan
źródło
2
Ta funkcja została niestety wycofana, jak widać tutaj . To bardzo rozczarowująca sytuacja, w której jest to przestarzałe, a poprzednia wersja, której użyłem, MapIconMakerzostała już przestarzała.
zerowords
Zauważ, że nie działa to z https, tylko z http. Porażka!
JoeGalind
@JoeGalind Czy jest jakiś powód, dla którego podczas pobierania kolorów wymagane jest szyfrowanie? Chodzi mi o to, że nie widzę żadnego zagrożenia bezpieczeństwa do użycia, httpchyba że ujawnia coś, czego nie jestem świadomy w nagłówku
Jonathan
@JonathanLeaders: Oznacza to, że musisz dodać domenę do listy dozwolonych na info.plist twojego projektu, ponieważ nie jest to wywołanie https.
JoeGalind
6
Zaktualizowano na rok 2019, nie jest już przestarzały
Jonathan
12

Najprostszym sposobem, jaki znalazłem, jest użycie BitmapDescriptorFactory.defaultMarker (), dokumentacja zawiera nawet przykład ustawienia koloru. Z mojego własnego kodu:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))
Michael Hamilton
źródło
Czy to tylko Android, czy też przeglądarki internetowe?
Jonathan
@Jonathan - to jest tylko dla Androida - przykład, który opublikował, jest w JAVA
dazza5000
2

Aby dostosować znaczniki, możesz to zrobić za pomocą tego narzędzia online: https://materialdesignicons.com/

W twoim przypadku potrzebujesz znacznika mapy, który jest dostępny tutaj: https://materialdesignicons.com/icon/map-marker i który możesz dostosować online.

Jeśli chcesz po prostu zmienić domyślny kolor czerwony na niebieski, możesz załadować tę ikonę: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

Wspomniano o tym w tym wątku: https://stackoverflow.com/a/32651327/6381715

GuGuss
źródło
0

Ten stosunkowo nowy artykuł zawiera prosty przykład z ograniczonym zestawem kolorowych ikon w Mapach Google.

Bagażnik samochodowy
źródło