与 Google 的“我的地图”互动答案

【问题标题】：Interact with Google's My Maps与 Google 的“我的地图”互动
【发布时间】：2016-07-26 14:14:34
【问题描述】：

我用Google's My Maps 创建了自己的地图。我创建了一个新图层并在其上放置了一些标记。
是否可以与这些标记进行交互？

我想按时间顺序“迭代”这些标记。
考虑以下地图：Remote Islands of the World.
我会在我的网站上制作一个“下一步”按钮。每当用户点击按钮时，地图会从“布维岛”跳转到“圣赫勒拿岛”，再点击一次会跳转到“伊豆群岛-三宅岛”等。

我什至不知道这是否可能或在哪里可以找到有关如何实现它的更多信息。

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

一种选择是创建 Google Maps Javascript API v3 地图并使用第三方 KML 解析器（如 geoxml3）通过代理从 MyMaps 访问 KML 数据。

example（使用 geoxml3 在侧边栏中显示 KML 点名称，但可以修改为添加一个“下一步”按钮，通过它们进行排序）。

example with "next"/"previous" links in infowindow and next button above the map

在useTheData 函数中添加了这段代码（以及多边形和折线的等效项）：

if (placemark.marker) {
  google.maps.event.addListener(placemark.marker, 'click', function(i) {

    return function(evt) {
    // add next and previous links to infowindow when the placemark is clicked
    infowindow.setContent(infowindow.getContent()+"<br><a href='javascript:next("+i+");'>next</a>&nbsp;-&nbsp;<a href='javascript:prev("+i+");'>previous</a>");
    // track the last opened placemark 
    openInfoWindow = i;
  }}(i));

然后这些函数打开下一个信息窗口：

function next(i) {
  var next = (i+1) % geoXmlDoc.placemarks.length;
  if (geoXmlDoc.placemarks[next].marker) {
   google.maps.event.trigger(geoXmlDoc.placemarks[next].marker, "click");
  } else if (geoXmlDoc.placemarks[next].polyline) {
   google.maps.event.trigger(geoXmlDoc.placemarks[next].polyline, "click");
  } else if (geoXmlDoc.placemarks[next].polygon) {
   google.maps.event.trigger(geoXmlDoc.placemarks[next].polygon, "click");
  }
}
function nextBtn() {
  // handle case where button is clicked before any placemarks on the map
  if (!openInfoWindow) openInfoWindow = 0;
  next(openInfoWindow);     
}

请注意，由于 geoxml3 使用 XmlHttpRequest 访问数据，因此必须在显示页面的域上使用代理来克服对 XmlHttpRequest 的相同域限制。

【讨论】：