Is it possible to replace map marker images?

Question

On a google map, I would like to visually differentiate one type of place (restaurants, zB) from another type of place, say motels.

Is there a way (that doesn't include the sacrifice of a chicken, the harvesting of newt eyeballs, etc.) to change the appearance of the markers used in google maps (using jQuery)?

IOW, is it possible to override the generic "upside-down teardrop with injected amniotic sac of a chick embryo" image with any arbitrary .png or so, on a location-by-location basis?

Or, if the same is possible in Bing maps, that would be an option, too.

`(that doesn't include the sacrifice of a chicken, the harvesting of newt eyeballs, etc.)` I was going to ask "what have you tried?", but now I'm scared. — Jason Sperske, Aug 14 '13 at 18:22
[Example of "marker categories" with custom icons](http://www.geocodezip.com/v3_MW_example_categories.html) from Mike Williams' Google Maps API v2 tutorial translated to the Google Maps Javascript API v3. If you want to use [Google Maps](http://maps.google.com), probably simplest to use KML and define your locations with custom markers. — geocodezip, Aug 14 '13 at 18:42

score 2 · Accepted Answer · edited Aug 14 '13 at 18:31

The Marker object has a setIcon method.

One pretty easy way to set it is with a coloredPin, which Google has a service to generate. Set up a function:

   function coloredPin(color) {
      return new google.maps.
        MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + color,
                    new google.maps.Size(21, 34),
                    new google.maps.Point(0,0),
                    new google.maps.Point(10, 34));
    }

and then use it with setIcon:

myMarker.setIcon(coloredPin('ffaa33'));

Is it possible to replace map marker images?

1 Answers1