在谷歌地图标记点击上显示 featurecardPanel答案

【问题标题】：display featurecardPanel on google map marker click在谷歌地图标记点击上显示 featurecardPanel
【发布时间】：2016-01-25 10:31:55
【问题描述】：

有一个带有一些标记的谷歌地图： http://gulfnews.com/culture/map-of-museums-in-the-uae-1.133398

如您所见，点击标记时会显示左侧的 featurecardPanel 以及一些数据（名称、描述）

请指教如何实现这一点？

【问题讨论】：

到目前为止你尝试过什么？您是否尝试完全按照在此站点上实施的方式执行此操作？如果是这样，它使用谷歌地图嵌入式 API 并创建您自己的自定义地图。如果您想通过 javascript API 执行此操作，则必须创建自己的 div 来滑动。
@TahTatsumoto 我想通过 javascript API 做到这一点，但我不知道如何在地图上创建 div。

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

【解决方案1】：

您需要做很多事情，但基本上您会将地图放在一个包装 div 中，该 div 同时包含地图 div 和将显示您想要的内容的 div。将侦听器添加到将显示/隐藏内容 div 的标记。

var map;
var overlayShown = false;

map = new google.maps.Map(document.getElementById("map_div"), {
  center: new google.maps.LatLng(33.808678, -117.918921),
  zoom: 12,
  mapTypId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({    
    position: new google.maps.LatLng(33.803333, -117.915278),
  map: map
});

google.maps.event.addListener(marker, "click", function() {
  var overlay = document.getElementById("map-overlay");
    if (!overlayShown) {
    overlay.setAttribute("class", "map-overlay-show");
    overlay.innerHTML = "Put some content here.";
    overlayShown = true;
  } else {
        overlay.className = "";
    overlay.innerHTML = "";
    overlayShown = false;
  }
});

这是一个粗略的JSFiddle

【讨论】：

嗨，我正在使用这种技术。你能告诉我如何添加多个标记吗？
没有更多细节，我不完全确定你想要什么。基本上，你会在一个循环中包装从var marker 到底部的所有内容。如果您想创建一个包含更多详细信息的新问题并 pm 链接，我可以提供更多帮助。