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

问题描述

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

然而，这很慢，我想用JS API渲染。

最简单的方法是什么？

<解决方案一个选项是使用自定义我的地图中的导出的KML将数据呈现在 Google Maps Javascript API v3 KmlLayer 。
$ b 代码段：（来自 的数据） p>

  var geocoder; 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，map：map}）} google.maps.event .addDomListener（window，load，initialize）;  

html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//

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

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

What is the simplest method to do so?

解决方案

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

code snippet: (data from this MyMap)

var geocoder;
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",
    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"></script>
<div id="map_canvas"></div>

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