Jacobo Koenig Jacobo Koenig - 1 month ago 22
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() {
//I WANT TO INITIALIZE POPOVER HERE
});


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

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


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

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);
});
Comments