创建带有多个标记的简单Google地图到网站 [英] Creating simple Google maps with multiple markers to website

问题描述

我使用"Google我的地图"工具创建了带有多个标记的google map到我的网站，我的代码如下:

I created google map with multiple markers to my website with "Google My Maps" tool and my code looks like this:

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

这确实非常快捷，简单，无需编写任何代码，但是我不喜欢的是显示名称和共享按钮的标题栏.我可以以某种方式隐藏此栏吗?谢谢.

It was really quick and simple without any code writting but what I don't like is the header bar which is showing the name and share button. Can I somehow hide this bar? Thank you.

推荐答案

您可以从该"MyMap"获取指向KML的链接:

You can get the link to the KML from that "MyMap":

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

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

And use that to populate a KmlLayer in a Google Maps Javascript API v3 map:

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

概念提琴证明

代码段:

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: "https://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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
<div id="status"></div>

这篇关于创建带有多个标记的简单Google地图到网站的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！