come utilizzare popover Twitter bootstrap per il contenuto dinamico

Question

voglio mostrare google mappa su popover

Ma la popover non riesce a cambiare mappa

funziona solo quando la carta è fisso

Il mio codice:

$(function(){ 

// getmap function from http://stackoverflow.com/questions/10545768/google-map-in-twitter-bootstrap-popver 
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 '<img src="' + src + '" />'; 
} 



$('.map').click(function(){ 
    location = $(this).text(); 
    $("#map").html(getMap({center: location})); 
    }); 


$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){ 
    return $("#map").html(); 
    }});  

    }); 

il mio problema con questa funzione:

$('.map').click(function(){...}); 

Con Clicca sul link (.map) perché il #Map viene modificato, il popover è rotto e non funziona

Grazie

Answer 1

non credo che devi farlo in due separati passi (clicca poi popover), né hai bisogno del div a meno che non ci sia un motivo per ciò che non hai menzionato. Questo funziona per me:

JavaScript:

$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){ 
    return getMap({center: $(this).text()}) 
    }});  
}); 

È quindi possibile rimuovere la riga center: 'New York, NY', dai vostri GetMap params.

HTML:

<a href="#" class="map">New York, NY</a> 

Se si sta utilizzando il div #Map per rendere la popover più grande, basta cambiare il CSS del popover invece, facendo qualcosa di simile:

.popover { width: 512px; height: 512px; } 

lo farei consiglia di utilizzare un selettore più specifico per questo, altrimenti interesserà i popover in altre parti del tuo sito.