Google Maps API：无法通过chart.apis.google.com生成自定义地图图钉

那个chart.apis.google.com的图钉生成API确实已经完全弃用了——Google早在2012年就宣布停止维护该Chart API，现在服务彻底下线，所以之前的URL自然无法工作。

下面是几种可行的替代方案，都是目前Google Maps API官方支持的方式：

• 自定义SVG图标（推荐）
  SVG格式体积小、可缩放且易于修改，你可以自己编写SVG代码，或者用在线工具生成带文字的图钉，然后直接在Marker的配置中引用：

  // 示例：使用内联SVG作为图钉
  const customMarker = new google.maps.Marker({
    position: { lat: 40.7128, lng: -74.0060 },
    map: yourMapInstance,
    icon: {
      url: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40"><path d="M16 0C7.2 0 0 7.2 0 16c0 11 16 24 16 24s16-13 16-24C32 7.2 24.8 0 16 0z" fill="#1e90ff"/><text x="16" y="19" font-family="Arial" font-size="18" text-anchor="middle" fill="#000000">L</text></svg>',
      scaledSize: new google.maps.Size(32, 40) // 按需调整尺寸
    }
  });
  

  也可以把SVG保存为单独文件，直接引用文件路径作为url值。

• 自定义PNG/JPG图片
  如果习惯用设计工具（比如Figma、Photoshop）制作图钉，导出PNG/JPG格式后，直接通过icon属性引用：

  const customMarker = new google.maps.Marker({
    position: yourLatLng,
    map: yourMapInstance,
    icon: {
      url: '/assets/custom-pin.png',
      scaledSize: new google.maps.Size(30, 40)
    }
  });
  

• 使用Google Maps Symbol类（简单形状）
  如果只需要基础形状的标记，可以用Google Maps的Symbol类自定义简单图形，比如圆形、箭头等，但这种方式不太适合带文字的图钉：

  const customMarker = new google.maps.Marker({
    position: yourLatLng,
    map: yourMapInstance,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      fillColor: '#1e90ff',
      fillOpacity: 1,
      strokeColor: '#000000',
      strokeWeight: 2,
      scale: 10
    }
  });
  

相比旧的Chart API，这些方案更灵活，能完全自定义图钉的样式、颜色和内容，也符合Google Maps当前的规范。

内容的提问来源于stack exchange，提问作者Lakhvir Singh