Custom marker color for default (dot) marker

 

I've seen lots of other questions similar to this (here, here and here), but they all have accepted answers that don't solve my problem. The best solution I have found to the problem is the StyledMarker library, which does let you define custom colours for markers, but I can't get it to use the default marker (the one you get when you do a google maps search - with a dot in the middle), it just seems to provide markers with a letter in, or with a special icon.

You can dynamically request icon images from the Google charts api with the urls: 

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

Which looks like this: the image is 21x34 pixels and the pin tip is at position (10, 34)

And you'll also want a separate shadow image (so that it doesn't overlap nearby icons): 

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Which looks like this: the image is 40x37 pixels and the pin tip is at position (12, 35)

When you construct your MarkerImages you need to set the size and anchor points accordingly: 

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

You can then add the marker to your map with: 

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

Simply replace "FE7569" with the color code you're after. Eg:

Credit due to Jack B Nimble for the inspiration ;)

If you use Google Maps API v3 you can use setIcon eg 

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Or as part of marker init: 

marker = new google.maps.Marker({
    icon: 'http://...'
});

Other colours:

  • Blue marker
  • Red marker
  • Purple marker
  • Yellow marker
  • Green marker

    • Use the following piece of code to update default markers with different colors. 

    (BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

    Here is a nice solution using the Gooogle Maps API itself. No external service, no extra library. And it enables custom shapes and multiple colors and styles. The solution uses vectorial markers, which googlemaps api calls Symbols.

    Besides the few and limited predefined symbols, you can craft any shape of any color by specifying an SVG path string (Spec).

    To use it, instead of setting the 'icon' marker option to the image url, you set it to a dictionary containing the symbol options. As example, I managed to craft one symbol that is quite similar to the standard marker: 

    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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1,
   };
}

var marker = new google.maps.Marker({
   map: map,
   position: new google.maps.LatLng(latitude, longitude),
   icon: pinSymbol("#FFF"),
});

    I you are careful to keep the shape key point at 0,0 you avoid having to define marker icon centering parameters. Another path example, the same marker without the dot: 

        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',

    And here you have a very simple and ugly coloured flag: 

        path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',

    You can also create the paths using a visual tool like Inkscape (GNU-GPL, multiplatform). Some useful hints:

  • Google API just accepts a single path, so you have to turn any other object (square, cercle...) into a path and join them as a single one. Both commands at the Path menu.
  • To move the path to the (0,0), go to the Path Edit mode (F2) select all the control nodes and drag them. Moving the object with F1, won't change the path node coords.
  • To ensure the reference point is at (0,0), you can select it alone and edit the coords by hand on the top toolbar.
  • After saving the SVG file, which is an XML, open it with an editor, look for the svg:path element and copy the content of the 'd' attribute.
    • 链接地址: http://www.djcxy.com/p/81502.html

    上一篇: 缩放时保持居中

    下一篇: 自定义标记颜色为默认（点）标记