Google Map Encoded Polylines（编码折线）无法显示问题求助

你的代码使用的是早已停止服务的Google Maps JavaScript API v2版本语法，所有v2专属类、方法（比如GMap2、GLatLng、GPolyline.fromEncoded等）在当前通用的v3版本API中完全不兼容，这是页面无法正常显示的核心原因，和你的API密钥、编码折线数据本身无关。

• 清理重复/错误的API加载逻辑：
  1. 删除head标签内的旧版v2 API加载语句
  2. 把body标签内的API脚本的bsrc属性改为正确的src，补充加载geometry库，把callback参数值改为你的初始化函数名load
  3. 给地图容器和页面补充基础CSS，避免地图因为无宽高不显示
• 替换所有v2语法为v3兼容实现：
  1. 地图初始化改用google.maps.Map类
  2. 坐标实例改用google.maps.LatLng
  3. 编码折线解析改用geometry库提供的google.maps.geometry.encoding.decodePath()方法，你之前积累的所有轨迹points编码串可以直接复用，不需要重新生成，原有levels、zoomFactor、numLevels参数在v3中已自动处理，无需传入
  4. 折线添加到地图改用setMap()方法，不再使用addOverlay
  5. 控件配置直接在地图初始化参数中设置，无需手动实例化v2的控件类

<html>
<head>
<title>MAP</title>
<style>
  /* 必须设置地图容器宽高，否则地图不会渲染 */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
    width: 100%;
  }
</style>
<script type="text/javascript">
function load() {
  // 初始化地图
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(49.00,-108.10),
    zoom: 3,
    // 控件配置
    zoomControl: true,
    mapTypeControl: true,
    // 移除HYBRID地图类型
    mapTypeIds: ['roadmap', 'satellite']
  });
  
  // 解析编码折线，points参数直接用你原有数据即可
  var path = google.maps.geometry.encoding.decodePath("ynq`HhymiVrBbDd@Z^CZSzHuL~BqGrAqCr@sBN{@AkAcJRwG\\kIJqNd@eE?yHs@iE}@eFaBy]}Ns_@_Oa@u@SsATuVMqEQiCg@gDaA}C_EgIuA}B{AuDs@uDQaBMwERiFl@uDfBuFdAmCpHgQJk@~CeKLaCCo@YsBYu@g@u@qAy@yAIq@LmIpEiEtBsCfAqG|AeCd@aGt@uSbEoItCwOlGuCr@}Eb@yEQiE}@_A]}BiAcEeDsAyAmRmWeAiA_CgBaCu@kBYiDHsCl@{At@}ChCgX`^wFzGuFlG}DxDcR~RwDjDiFhEibAjr@sDtBiCjAuW|JkEhAuKxBqM|CmR~F_Y~KoDnByDnCgDzCuDfEaU|XqEjFoVfX_EzFkB`DwEvIaKdSgChEoAxAmAdAyBtA}MxGqLtHsCvAqBz@wDbAkGf@mB@}CMuX}C}TmBgf@iAeO{B{EQ{DTcK`BcH|@_Rp@{AEsCJiKzAgEHqESeDi@oCs@yE_AmDG}E\\mEjAqFlD}CzCsM|Q_EfFg@`@cCxAwItGuIdH|EnO");
  
  // 生成折线实例
  var TACOMA = new google.maps.Polyline({
    path: path,
    strokeColor: "#0000ff",
    strokeWeight: 4,
    strokeOpacity: 0.8,
    map: map
  });
}
</script>
</head>
<body>
<div id="map"></div>
<script
    src="https://maps.googleapis.com/maps/api/js?key=[替换为你自己的API密钥]&callback=load&libraries=geometry&v=weekly&channel=2"
    async
></script>
</body>
</html>

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