Google Map en Twitter Bootstrap Popver

Estoy usando Bootstrap de Twitter y quiero mostrar un mapa de Google en una ventana emergente .

La forma en que funciona en este momento estoy haciendo algo como esto

$ -> $('.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() 

La .popover-contents carga su contenido desde un div .popover-contents que está oculto y conectado a la a con atributos de datos (para que pueda encontrar la ventana emergente correcta para mostrar)

El mapa funciona perfectamente, cuando no está en una ventana emergente.

El mapa funciona perfectamente cuando no está en una ventana emergente, y creo que está conectado con la copia a través de html() en jQuery a otro elemento DOM. La rutina de carga de Twitter no proporciona una callback modal opened , y realmente no estoy seguro de cómo hacer que los mapas funcionen.

introduzca la descripción de la imagen aquí

Como puede ver, el mapa funciona correctamente en la página de perfil completo, el marcado es el mismo (Rails parciales), y el javascript también se comparte. Solo puedo asumir que la API de GoogleMaps realmente no le gusta tener que dominarlo. y por lo tanto está causando problemas.

Si está utilizando ventanas emergentes, su mejor opción podría ser utilizar la API estática de Google y evitar los dolores de cabeza asociados con un mapa interactivo. Tomando prestado un caso muy simple de la documentación, puede hacer algo como esto:

 var options = { content: '' }; $('#example').popover(options) 

Envolviéndolo en una función reutilizable se obtiene:

 var getMap = function(opts) { var src = "http://maps.googleapis.com/maps/api/staticmap?", params = $.extend({ center: 'New York, NY', zoom: 14, size: '512x512', maptype: 'roadmap', sensor: false }, opts), query = []; $.each(params, function(k, v) { query.push(k + '=' + encodeURIComponent(v)); }); src += query.join('&'); return ''; } var content = getMap({center: 'Fritz-Walter Stadion, Kaiserslautern'}); $('#example').popover({ content: content }) 

* Otra respuesta válida se puede encontrar aquí, pero no es la solución que tomé. *

Parece ser ampliamente aceptado que la representación de un mapa de Google en un elemento DOM invisible conduce a errores de representación, y la solución (se encuentra en http://sethmatics.com/articles/classipress-hidden-map-tab-and-redraw-google -map-canvas / ) parece verse algo como esto:

 jQuery('.tabprice ul.tabnavig li a').click(function() {    if(jQuery(this).attr('href') == '#priceblock1') {        //the element has to be visible on the page for google maps to render properly        jQuery('#priceblock1').show();        //rebuild the google map canvas to the proper size        google.maps.event.trigger(map, 'resize');        //ClassiPress javascript function to build map at address        codeAddress();    } }); 

Creo que vale la pena mover el elemento dom muy lejos de la parte izquierda / derecha / inferior de la pantalla para evitar que se muestre al usuario, o hacer algo con Z-Indexing para asegurarse de que el usuario no lo haga. ver un popup no deseado

En mi caso, sin embargo, la API de mapas estáticos sugerida por rjz fue perfecta.

El problema es que la API de Google Maps requiere un elemento visible para el contenedor, por lo que debe llamar a la API dentro del controlador de eventos shown.bs.modal . Algo como esto:

 $picker.popover({ html: true, content: '
' }); $picker.on('shown.bs.popover', function () { var $container = $('.superPopover'); new google.maps.Map($container[0]); });