带有新Google Chart API的动态地图标记图标？

Question

多年以来，我使用Google的Chart API在Javascript中创建了Google动态地图标记：

Dynamic icons

几天后，地图标记的生成不再起作用。这在链接的顶部清楚地说明： “警告：此API已弃用，计划于2019年3月14日关闭。请使用主动维护的Google Charts API。”

他们与新版Google Chart API的链接并未提供任何替代，可用于创建带有自定义颜色和自定义字母（我需要的）图标的地图标记。

我在新API中找到的最接近的是：Customizing Markers 但在这里，唯一的选择是用自定义图像替换默认的Google标记。因此似乎没有动态生成标记。

也许我已经监督了某些事情，或者任何人都知道一项服务来创建谷歌地图，比如带有字母和自定义颜色的标记。

Answer 1

我也注意到我的自定义颜色图标消失了。在http://maps.google.com/mapfiles/ms/icons上似乎存有一些预生成的图标，例如http://maps.google.com/mapfiles/ms/icons/green-dot.png

我设法找到了Google托管的图标列表：https://sites.google.com/site/gmapsdevelopment/

Answer 2

在这之间，我找到了一个解决方案，允许在标记内设置定义的颜色和标签。它没有Google Chart API（仅限Google Maps API）。

解决方案的第一部分取自here（参见vokimon的回答）：它采用SVG路径而不是预定义图像（png）。这样你就可以定义一个自定义颜色（如果需要甚至可以定义more）：

function createPin (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',
            fillColor: color,
            fillOpacity: 1,
            strokeColor: '#000',
            strokeWeight: 2,
            scale: 1,
            labelOrigin: new google.maps.Point(0, -30)
        };
    }

“labelOrigin”对于正确定位标签非常重要。

现在您可以创建标记本身：

var marker = new google.maps.Marker({
   map: <yourMapInstance>,
   position: new google.maps.LatLng(<latitude>, <longitude>),
   icon: createPin('#F6AC01'),
   label: { 
            text: 'X',
            fontWeight: 'bold'
          },
});

如果需要，有更好的标签选项描述here。