CODEWITHSUNDEEP
google-mapstwitter-bootstrap
Charlie Davies
Charlie Davies

Reputation: 1834

BootStrap Popover on Google Maps

I am trying to get a Bootstrap Popover to be placed over a Google Map when it loads.

The popover must be in a specific lat / lng place and load when the map loads, it must be able to contain HTML.

I have tried a number of things. I have tried to float a div over the map using Infobox and Google Custom over lay. Interestingly these divs to appear in the right place, I can then link to them and use them as the element for the popover. However they do not load on start. You have to initiate them in the console e.g.

$("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})

$("#example1").popover('show')

When i type these manually it works and pops up on the map. If I put them into my javascript file and load it after everything has loaded:

$(document).ready(
  function(){
    $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
    $("#example1").popover('show')
    console.log("hello")
});

Nothing happens at all. It simply does not work.

What I am trying to do is position a div at a lat/lng then use that div with an a element in it to use for the location of the popover. All to happen on start.

Is there a simpler way that I am not seeing?

Upvotes: 3

Views: 3883

Answers (2)

James Jones
James Jones

Reputation: 3899

I had a similar issue. I fixed it by replacing $(document).ready with $(window).load. This way we know Google Maps has loaded before calling a popover on an element that might not have existed before. In your case:

$(window).load(
  function(){
    $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
    $("#example1").popover('show')
    console.log("hello")
});

Upvotes: 0

Allan Wintersieck
Allan Wintersieck

Reputation: 873

I suspect it's not working from your code because it's firing too soon before the map is ready (ready() fires when the DOM is ready, not necessarily waiting for Google's javascript to be entirely ready).

First, check if it is indeed a timing issue with this test:

$(document).ready(function(){
  setTimeout(function() {
    $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
    $("#example1").popover('show')
    console.log("hello")
  }, 2000);
});

The popover should appear 2 seconds after the page loads.

If that works, then try this for an actual solution:

$(document).ready(function(){
  google.maps.event.addListenerOnce(map, 'idle', function(){
    $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
    $("#example1").popover('show')
    console.log("hello")
  });
});

Upvotes: 1

Related Questions