使用 Google Maps JavaScript API 渲染我的地图 [英] Render a My Maps using Google Maps JavaScript API

问题描述

当我创建自定义我的地图时，默认情况下，Google 允许您通过 iframe 方法进行共享.

When I created a custom My Maps and by default, Google allow you to share via iframe approach.

但是，这很慢，我想改用 JS API 进行渲染.

However, this is very slow and I want to render using JS API instead.

最简单的方法是什么?

推荐答案

一种选择是使用自定义我的地图"中的导出的 KML"在 Google Maps Javascript API v3 KmlLayer.

One option is to use the "Exported KML" from custom My Maps to render the data on a Google Maps Javascript API v3 KmlLayer.

我的回答中描述了如何从 MyMaps 获取 KML 链接这里

代码片段:(数据来自 这个我的地图)

var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var layer = new google.maps.KmlLayer({
    // url: "http://www.google.com/maps/d/kml?mid=zNPjLbo835mE.k3TvWfqGG-AU",
    url: "http://www.google.com/maps/d/kml?forcekml=1&mid=1-mpfnFjp1e5JJ1YkSBjE6ZX_d9w",
    map: map
  })

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

这篇关于使用 Google Maps JavaScript API 渲染我的地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！