在 Google Maps Marker 上初始化 Bootstrap 弹出框答案

【问题标题】：Initialize a Bootstrap popover on a Google Maps Marker在 Google Maps Marker 上初始化 Bootstrap 弹出框
【发布时间】：2016-10-28 19:46:10
【问题描述】：

我正在尝试在单击 Google 地图标记时初始化弹出框，但 Bootstrap 文档仅说明了当您在 HTML 上创建这样的按钮时如何执行此操作：

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

就我而言，我没有出口，因为标记是在 javascript 中定义的：

var marker = new google.maps.Marker({
              position: latLong,
              map: map,
              icon: 'images/icon.png'
            });

        marker.addListener('click', function() {
            //I WANT TO INITIALIZE POPOVER HERE
        });

解释的另一种方式，它用 jQuery 来做这样的：

$(function () {
  $('[data-toggle="popover"]').popover()
})

但据我所知，我的标记也没有数据切换元素。

谁能指出我可能遗漏了什么或做错了什么？

【问题讨论】：

我认为你应该为 popover() 函数提供一个值，比如 popover('show') 或 'toggle'

标签： javascript jquery html twitter-bootstrap google-maps

【解决方案1】：

您应该使用谷歌地图信息窗口而不是弹出窗口，请参见下面的基本示例

var infoContent = "<h1>Placeholder Information</h1>";

var infoWindow = new google.maps.InfoWindow({
    content: infoContent
});

marker.addListener('click', function () {
    infoWindow.open(map, marker);
});

【讨论】：