使用多个标记创建简单的Google地图到网站

时间:2017-10-26 12:41:22

标签: google-maps google-maps-api-3 google-maps-markers

我使用" Google我的地图"创建了带有多个标记的谷歌地图到我的网站工具和我的代码如下所示:

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1PdcME79x-maD5xuiVEi4C777aL4" width="640" height="480"></iframe>    

在没有任何代码写入的情况下,它非常简单快捷,但我不喜欢的是显示名称和共享按钮的标题栏。我可以以某种方式隐藏这个酒吧吗?谢谢。

1 个答案:

答案 0 :(得分:0)

您可以从“MyMap”获取KML的链接:

http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4

并使用它来填充Google Maps Javascript API v3地图中的KmlLayer:

var kmlLayer = new google.maps.KmlLayer({
  url: "http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
  map:map
});

existing function

proof of concept fiddle

代码段

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var kmlLayer = new google.maps.KmlLayer({
    url: "http://www.google.com/maps/d/kml?mid=1PdcME79x-maD5xuiVEi4C777aL4",
    map: map
  });
  google.maps.event.addListener(kmlLayer, 'status_changed', function() {
    document.getElementById('status').innerHTML = kmlLayer.getStatus();
  });

}
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>
<div id="status"></div>