没有 API 密钥的 Google 地图

通常,在集成 Google Maps 时,您使用Maps JavaScript API ,这需要 API 密钥并且可能会导致不应低估更高访问次数的成本。 有很多不错的替代品,例如mapboxOpenStreetMap ,但它们还没有实现 Google 提供的各种功能。 Google 本身还通过共享功能提供了一种无需 API 密钥的方法,我们可以将其用于我们的目的。


可以以编程方式使用此路径来输出任何地址(即使不知道纬度和经度)。 此外,地图(与 JS 对应物相反)包含指向路线规划器的链接。 地图也可以在 CSS 过滤器的帮助下美化(尽管结果与 JS API 可能的原生样式不太接近)。

多年来,这样做的方法是通过参数output = embed ,Google 并未正式支持该参数,因此最近显示错误有所增加:

331190767bb32b2468632e609223c53e

如果你通过maps.google.de使用官方的分享功能,你会得到如下代码,例如:

331190767bb32b2468632e609223c53e

如果我们在src参数中构造长 URL,则会产生一个模式:

331190767bb32b2468632e609223c53e

我们识别以下数据类型:

  • m:矩阵
  • s:字符串
  • f:浮动
  • d:双人
  • i:整数
  • e: 枚举

经过几次尝试和错误尝试,我们可以消除一些值并将最重要的值打包在变量中,例如动态定义地址:

331190767bb32b2468632e609223c53e

最后,我们可以为地图添加更漂亮的外观,例如借助以下 CSS 代码:

331190767bb32b2468632e609223c53e

最终,我们得到了一个免费的、运行可靠的动态地图:

背部