Sto usando l'API di Google Maps per creare una mappa piena di marcatori, ma voglio che un marcatore si distingua dagli altri. La cosa più semplice da fare, penso, sarebbe cambiare il colore dell'indicatore in blu, anziché in rosso. È una cosa semplice da fare o devo creare in qualche modo un'icona completamente nuova? Se devo creare una nuova icona, qual è il modo più semplice per farlo?

Poiché le mappe v2 sono obsolete, probabilmente sei interessato alle mappe v3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

Per le mappe v2:

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

Avresti un set di logica che fa tutti i pin "normali" e un altro che esegue i pin "speciali" usando il nuovo marker definito.

Con la versione 3 dell'API di Google Maps, il modo più semplice per farlo potrebbe essere quello di prendere un set di icone personalizzato, come quello che Benjamin Keen ha creato qui:

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

Se metti tutte quelle icone nello stesso posto della pagina della tua mappa, puoi colorare un indicatore semplicemente usando l'opzione icona appropriata durante la creazione:

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

Questo è semplicissimo ed è l'approccio che sto usando per il progetto a cui sto lavorando attualmente.

MapIconMaker: una libreria per Google Maps v2

Un modo è usare MapIconMaker (deadlink). C'è un esempio qui (deadlink). Le icone predefinite di Google Maps sono 20px di larghezza e 34px di altezza, quindi puoi usare qualcosa di simile per emulare:

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

Potresti anche avvolgerlo in qualche funzione per rendere le cose ancora più facili su te stesso:

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

Questo è quello che uso personalmente per tutti i marker che creo. Preferisco avere la possibilità di cambiare i colori di un capriccio.

Aggiornamento: il colore esadecimale dell'icona predefinita è "# FE7569". Inoltre, è possibile impostare Immagine su un indicatore anziché creare un nuovo indicatore con una nuova icona. Quindi, se si desidera evidenziare una funzione, è possibile utilizzare qualcosa di simile utilizzando la funzione sopra:

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

StyledMarker: una libreria per Google Maps v3

Dato che V2 è stato sostituito da V3 qualche tempo fa, ho pensato che avrei dovuto aggiornare questa risposta. Ho creato una libreria per marcatori personalizzati che è possibile trovare qui nella Libreria di utilità V3 (deadlink). Consente diversi colori e forme e puoi anche posizionare il testo sul marcatore. Funziona utilizzando l'API Google Charts che ha metodi per creare marcatori di tipi di Google Maps. Sentiti libero di guardare il codice sorgente se preferisci utilizzare direttamente l'API Google Charts.

La cosa su quella libreria, tuttavia, è che si occupa di definire le aree cliccabili di queste immagini dei marker per te, quindi, per esempio, la bolla più lunga con il testo avrà le regioni cliccabili che ci si aspetta, come questo esempio (deadlink).

Design materiale

EDITED MARCH 2019 now with color programmatic pin,

JAVASCRIPT PURO, NESSUNA IMMAGINE, ETICHETTE DI SUPPORTO

non si basa più sull'API Charts obsoleta

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

Personalmente, penso che le icone generate dall'API Google Charts abbiano un bell'aspetto e siano facili da personalizzare dinamicamente.

Vedi la mia risposta sull'API 3 di Google Maps: colore dell'indicatore personalizzato per l'indicatore predefinito (punto)

Il modo più semplice che ho trovato è usare BitmapDescriptorFactory.defaultMarker () la documentazione ha anche un esempio di impostazione del colore. Dal mio codice:

MarkerOptions marker = new MarkerOptions()
            .title(formatInfo(data))
            .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE))
            .position(new LatLng(data.getLatitude(), data.getLongitude()))

Per personalizzare i marker, puoi farlo da questo strumento online: https://materialdesignicons.com/

Nel tuo caso, vuoi il marker della mappa che è disponibile qui: https://materialdesignicons.com/icon/map-marker e che puoi personalizzare online.

Se vuoi semplicemente cambiare il colore Rosso predefinito in Blu, puoi caricare questa icona: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

È stato menzionato in questa discussione: https://stackoverflow.com/a/32651327/6381715

Questo articolo relativamente recente fornisce un semplice esempio con un set limitato di icone colorate di Google Maps.