Google maps v3 default marker path with other colors

问题

My goal is to change the color of the nice looking default google maps marker. Therefore, I'm looking for the path / shape of the default (red) one. I've found this to change to color:

function pinSymbol(color) {
    return {
        path: '???' 
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

So, by invoking the function, I would like to change the color (e.g. icon: pinSymbol("#666"). However, I don't know where to find the path? I'm not looking for the v2 / plain marker!

// edit: I've found this path:

path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',

(from an answer to the question: Google Maps API 3 - Custom marker color for default (dot) marker)

How to generate the smooth gradient?

回答1:

Using the path you provided in your question:

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 1,
        scale: 1
    };
}

proof of concept fiddle

code snippet:

function pinSymbol(color) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 1,
    scale: 1
  };
}
function initialize() {
  var latlng = new google.maps.LatLng(47.605, -122.333);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: pinSymbol('red')
  });

  var marker1 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.5, -122.0),
    icon: pinSymbol('green')
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.6, -122.2),
    icon: pinSymbol('orange')
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.7, -122.1),
    icon: pinSymbol('yellow')
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="content_window"></div>

回答2:

By inspecting the Maps' code in action, I've found that in Google Maps JS API V3 the default URL of the marker is https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png , and the marker itself is a 22x40 PNG file. To recolor it, you'd have to probably use CSS filters/JS etc. or manually re-hue it in raster graphics editor.

回答3:

I think you can change the icon by doing this marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Or you can refer to the customize marker image documentation.

Also, you can use the predefined symbols for your path. Sample code:

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

来源：https://stackoverflow.com/questions/27488643/google-maps-v3-default-marker-path-with-other-colors