Time to revisit the color-coded map pins option.

First, I thought it'd be a good idea to make google maps use the same marker image as Open Street Map. That way you can customize it (marker.png in your theme images), and more importantly it removes the dependance on google's long-depreciated charts API which was being used to generate the google maps pin images dynamically before -- that API could go dark any day.

The tricky part was to maintain support for the colored map pins option without having to create 10 new images for different colored pins which would be a pain for you to customize. To achieve this for google, I ended up using some tricky CSS. Basically I have it append a color number to the image with marker.png?color=2. Then the CSS img[src="https://www.quietplease.org/attractions/templates/images_blog/marker.png?color=2"] { filter: hue-rotate(60deg); } alters the color of just the ones with ?color=2.

I was hoping this would make it easy to port the colored pins option to OSM. No such luck, somehow the CSS trick doesn't work with OSM. Seems as if the markers aren't actually img tags in the DOM for OSM. Who knows what they are? Chrome's element inspector should know and it says it's an <image> tag with a weird xlink:href attribute containing the url. But image[xlink:href="https://www.quietplease.org/attractions/templates/images_blog/marker.png?color=3"] { filter: hue-rotate(120deg); } didn't work. A search result suggested escaping the colon, but that didn't work either. Even using the image tag's id didn't help, so there must be something mysteriously keeping it from acting as part of the page DOM.

Eventually, after reading novel upon novel of documentation, I realized the only way to get this done before I die of old age is to use something much like the google chart image-generating API. Rather than use the depreciated one, I've built a new one into WSN that uses your marker.png and applies color changes via gd/imagemagick in a script. This is a bit slow and increases server load, but I set cache headers to cache it for a week to hopefully mitigate that.

Alas GD doesn't have a built-in hue-changer, so that too was an ordeal. Once I got that to work I discovered GD was losing the transparency, fixed that. Then I realized that impimenting hue change for imagemagick was going to be a much longer ordeal, so I decided to force it to use GD for that -- because just about everybody should have GD in their PHP installation these days, even if you prefer imagemagick for most operations.

The map pin changes are in today's beta.