Jacobo Koenig Jacobo Koenig - 1 year ago 157
HTML Question

Initialize a Bootstrap popover on a Google Maps Marker

I am trying to initialize a popover on click of a Google maps marker, but Bootstrap documentation only explains how to do it when you create a button on HTML like such:

<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>

In my case, I have no outlet, as the marker is defined in javascript:

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

marker.addListener('click', function() {

The other way that is explained, it to do it with jQuery like so:

$(function () {

But my marker also has not data-toggle element as far as I know.

Can somebody point out what I might be missing or doing wrong?

Answer Source

You should use Google Maps info window rather then a popover, see basic example below

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

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

marker.addListener('click', function () {
    infoWindow.open(map, marker);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download