0

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?

Catherine
  • 13,588
  • 9
  • 39
  • 60
  • How do you display the image in a browser? If there is a URL, then you can just use a normal marker. You can also load it as a [base64 encoded data URL](http://stackoverflow.com/questions/1095102/how-do-i-load-binary-image-data-using-javascript-and-xmlhttprequest) – geocodezip Oct 23 '13 at 00:32
  • I use this technique to get the image: http://stackoverflow.com/questions/9303757/how-to-change-color-of-an-image-using-jquery – Catherine Oct 23 '13 at 01:18

1 Answers1

0

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.

Andy
  • 61,948
  • 13
  • 68
  • 95
  • Unfortunately I don't have a path to the png--I want to change the colors of the icon on the fly, hence dynamically. – Catherine Oct 23 '13 at 01:17