wie

Question

twitter Bootstrap popover für dynamische Inhalte zu verwenden, möchte ich auf popover google map zeigen

Aber die popover ausfällt Karte ändern

funktioniert nur, wenn die Karte fixiert ist

Mein Code:

$(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(); 
    }});  

    }); 

Mein Problem mit dieser Funktion:

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

Mit einem Klick auf dem Link (.map), weil die #map geändert wird, ist der popover gebrochen und nicht

Danke

Answer 1

ich Sie es in zwei separaten tun müssen, um nicht denken funktioniert Schritte (klicken Sie dann auf Popover), noch brauchen Sie das Div, es sei denn, es gibt einen Grund für das, was Sie nicht erwähnt haben. Dies funktioniert für mich:

JavaScript:

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

Sie können dann entfernen Sie die center: 'New York, NY', Linie von Ihrem getMap params.

HTML:

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

Wenn Sie die #map div wurden unter Verwendung der popover größer zu machen, sondern nur die CSS der stattdessen popover ändern, indem Sie so etwas wie tun:

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

würde ich empfehlen, einen spezifischeren Selektor dafür zu verwenden, andernfalls wirkt sich dies auf Popover an anderen Stellen auf Ihrer Site aus.