Come posso cambiare il colore di un marker di Google Maps?

Question

Sto utilizzando l'API di Google Maps per costruire una mappa completa di marcatori, ma voglio un marcatore per distinguersi dagli altri. La cosa più semplice da fare, credo, sarebbe quello di cambiare il colore del marcatore al blu, al posto del rosso. Si tratta di una cosa semplice da fare o devo per creare una nuova icona intero in qualche modo? Se devo creare una nuova icona, qual è il modo più semplice per farlo?

Answer 1

Dal mappe v2 è deprecato, si sono probabilmente interessati a mappe v3: https: //developers.google.com/maps/documentation/javascript/markers#simple_icons

Per le mappe v2:

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

Si avrebbe una serie di logiche che fare tutti i pin 'regolari', e un altro che fa il perno di 'speciale' (s) utilizzando il nuovo marcatore definito.

Answer 2

Con la versione 3 della API di Google Maps, il modo più semplice per farlo può essere afferrando un set di un'icona personalizzata, come quella che Benjamin Keen ha creato qui:

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

Se si mettono tutte queste icone nello stesso posto come pagina mappa, è possibile colorare un marcatore semplicemente utilizzando l'opzione apposita icona durante la creazione di esso:

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

Questo è super-facile, ed è l'approccio che sto utilizzando per il progetto su cui sto lavorando al momento.

Answer 3

MapIconMaker: una biblioteca per Google Maps v2

Un modo è quello di utilizzare la MapIconMaker . C'è un esempio qui . Google Maps icone predefinite sono 20px 34px larghezza e altezza, in modo che si potrebbe 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});

Si potrebbe anche avvolgerla in qualche funzione per rendere le cose ancora più facile su te stesso:

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

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

Aggiornamento: Il colore esadecimale del icona di default è "# FE7569". Inoltre, è possibile setImage su un marcatore piuttosto che creare un nuovo marcatore con una nuova icona. Quindi, se volete una funzione per evidenziare si potrebbe andare con qualcosa di simile, utilizzando la funzione di cui sopra:

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

StyledMarker: una biblioteca per Google Maps v3

Dal momento che V2 è stato sostituito da V3 qualche tempo fa ho pensato di aggiornare questa risposta. Ho creato una biblioteca per i marcatori personalizzati che possono essere trovate sul Utility Biblioteca V3 qui . Permette di colori e forme diverse, ed è possibile inserire il testo sul marcatore pure. Funziona utilizzando l'API di Google Charts, che ha metodi per la creazione di Google Maps tipo marcatori. Sentitevi liberi di guardare il codice sorgente, se si preferisce utilizzare direttamente i grafici API di Google.

La cosa di quella biblioteca, tuttavia, è che si prende cura di definire le regioni cliccabili di queste immagini marcatori per voi, così, per esempio, la bolla più a lungo con il testo avrà le regioni cliccabili che ci si aspetta, come questo esempio .

Answer 4

Material Design

CURA MARZO 2019 ora con il colore pin di programmazione,

PURE JavaScript, NESSUNA IMMAGINE, SUPPORTI ETICHETTE

non si basa più su grafici deprecato 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,
    });

Answer 5

Personalmente, penso che le icone generati dal Charts API di Google sembrano grandi e sono facili da personalizzare in modo dinamico.

Vedere la mia risposta su API di Google Maps 3 - colore dell'indicatore personalizzato per impostazione predefinita (dot) marcatore

Answer 6

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

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

Answer 7

Per personalizzare i marcatori, lo si può fare da questo strumento online: https://materialdesignicons.com/

Nel tuo caso, si desidera che il mappa-marcatore , che è disponibile qui: https://materialdesignicons.com/icon/map-marker e che è possibile personalizzare in linea.

Se si desidera semplicemente cambiare il colore rosso di default Blue, è possibile caricare questa icona: http://maps.google.com/mapfiles/ms/icons/blue-dot.png

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