Ik gebruik de Google Maps API om een kaart vol markeringen te maken, maar ik wil dat één markering opvalt tussen de andere. Het eenvoudigste om te doen, denk ik, zou zijn om de kleur van de markering te veranderen in blauw in plaats van rood. Is dit eenvoudig te doen of moet ik op de een of andere manier een geheel nieuw pictogram maken? Als ik een nieuw pictogram moet maken, wat is dan de gemakkelijkste manier om dat te doen?

Antwoord 1, autoriteit 100%

Aangezien Maps v2 is verouderd, bent u waarschijnlijk geïnteresseerd in v3-kaarten: https: //developers.google.com/maps/documentation/javascript/markers#simple_icons

Voor v2-kaarten:

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

Je zou een set logica hebben die alle ‘gewone’ pinnen doet, en een andere die de ‘speciale’ pinnen doet met behulp van de nieuwe gedefinieerde markering.

Antwoord 2, autoriteit 91%

Met versie 3 van de Google Maps API is de eenvoudigste manier om dit te doen een aangepaste pictogrammenset te gebruiken, zoals de set die Benjamin Keen hier heeft gemaakt:

http://www.benjaminkeen.com/google-maps-coloured- markeringen/

Als u al deze pictogrammen op dezelfde plaats als uw kaartpagina plaatst, kunt u een markering eenvoudig inkleuren door de juiste pictogramoptie te gebruiken bij het maken ervan:

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

Dit is supereenvoudig en is de aanpak die ik gebruik voor het project waar ik momenteel aan werk.

Antwoord 3, autoriteit 92%

Materiaalontwerp

bewerkt maart 2019 Nu met programmatische pincode,

pure javascript, geen afbeeldingen, ondersteunt labels

Noteer niet langer op verouderde grafieken 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,
    });

4, Autoriteit 107%

MapiconMaker: een bibliotheek voor Google Maps V2

One Way is om de (deadlink). Er is een voorbeeld Hier (deadlink). Google Maps standaard pictogrammen zijn 20px breedte en 34px-hoogte, dus je zou zoiets kunnen gebruiken om te emuleren:

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

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

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

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