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ć?

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.

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ę.

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).

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,
    });

Osobiście uważam, że ikony generowane przez Google Charts API wyglądają świetnie i można je łatwo dynamicznie dostosowywać.

Zobacz moją odpowiedź w Google Maps API 3 - Niestandardowy kolor znacznika dla domyślnego znacznika (kropki)

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()))

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

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