Dynamic image for Google Maps Markers

Question

I have a map on which I display public transit stops. I would like to color code those stops according to various parameters. I would also like to use my own icon. I have figured out how to take a png image and change its color in javascript, but I'm not sure how to get the Google Map to use it as the Marker image.

I've seen the Styled Marker library but as far as I can tell, you can't use your own image with it--and from an (admittedly cursory) look at its source, I don't think I can change it to use my image as it seems to use URL parameters with a set of default markers to achieve the color change.

Any suggestions?

Answer 1

You want something like this:

  marker = new google.maps.Marker({
    draggable: false,
    raiseOnDrag: false,
    icon: {
      size: new google.maps.Size(32, 42),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(15, 42),
      url: // path to png
    },
    animation: google.maps.Animation.DROP,
    position: new google.maps.LatLng(lat, lng),
    map: map
  });

Here's the full documentation .