title: BootStrap Popover on Google Maps
body: <p>I am trying to get a Bootstrap Popover to be placed over a Google Map when it loads. </p>
  
  <p>The popover must be in a specific lat / lng place and load when the map loads, it must be able to contain HTML.</p>
  
  <p>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.</p>
  
  <pre><code>$("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
  
  $("#example1").popover('show') 
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$(document).ready(
    function(){
      $("#example1").popover({ title: 'Look!  A bird image!', content: "hello"})
      $("#example1").popover('show')
      console.log("hello")
  });
  </code></pre>
  
  <p>Nothing happens at all. It simply does not work. </p>
  
  <p>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.</p>
  
  <p>Is there a simpler way that I am not seeing?</p>