title: Google Map in Twitter Bootstrap Popver
body: <p>I'm using Twitter's Bootstrap, and want to show a Google Map in a <a href="http://twitter.github.com/bootstrap/javascript.html#popovers" rel="nofollow noreferrer">popover</a>.</p>
  
  <p>The way it works right now I'm doing something like this</p>
  
  <pre><code>$ ->
    $('.thumbnails a.js-popover').popover
      html: true,
      content: ->
        uid = $(this).data('profileUid')
        popover_container = $('.popover-contents:data(profileUid=' + uid + ')')
        _.each window.Maps, (map) ->
          google.maps.event.trigger map, 'resize' // I hoped this would re-draw the map
        popover_container.html()
  </code></pre>
  
  <p>The popover loads it's content from a <code>.popover-contents</code> div which is hidden, and connected to the <code>a</code> with data attributes (so that I can find the correct popover to show)</p>
  
  <p><img src="https://i.stack.imgur.com/M1wQ5.png" alt="The map works perfectly, when not in a popover"></p>
  
  <p>The map works perfectly when not in a popover, and I think it's connected with being copied via <code>html()</code> in jQuery to another DOM element. Twitter's bootstrap doesn't provide a <code>modal opened</code> callback, and I'm genuinely not sure how to make the maps work.</p>
  
  <p><img src="https://i.stack.imgur.com/LXO6N.png" alt="enter image description here"></p>
  
  <p>As you can see the map works correctly on the full profile page, the markup is the same (rails partial), and the javascript is shared, too - I can only assume the GoogleMaps API really doesn't like having it's <em>dom</em> messed with, and is thus causing issues.</p>