CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapgoogle-maps
Jacobo Koenig
Jacobo Koenig

Reputation: 12514

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?

Upvotes: 2

Views: 2315

Answers (1)

Kyle
Kyle

Reputation: 1043

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

Upvotes: 4

Related Questions