0
將Google地圖插入引導模式會給我「灰色方塊」的結果,但我看不到問題。將谷歌地圖加載到引導模式
我想我會觸發模式(「顯示」),然後加載上(「顯示」)地圖,以避免衝突就講到這兒Showing a Google Map in a modal created with Twitter Bootstrap
任何幫助,不勝感激
HEAD ELEMENTS
<script src="http://maps.googleapis.com/maps/api/js?client=[client-id]&sensor=false&v=3.13"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script><!-- twitter-bootstrap-v2.3.1-2-g37d0a30 -->
HTML
<div class='country'>
<h3>Denmark</h3>
<div id='123456' class='record'><!-- dynamic - id=recID in functions -->
<div class="contactInfo">
<div class="embName">
<em>Danish Embassy in Washington D.C., United States</em>
</div>
<div class="embAddr">3200 Whitehaven St.<br>N.W. 20008-3683 <br></div>
<strong>Tel: </strong><span class="phone">+1 (202) 234-4300</span><br>
<strong>Fax: </strong>+1 (202) 328-1470<br>
<strong>E-mail: </strong><span class="email">[email protected]</span><br>
<strong>Website: </strong><span class="website">www.ambwashington.um.dk</span><br>
<strong>Details: </strong><span class="Details">n/a</span><br>
<strong>Hours: </strong><span class="Hours">8:30 AM - 4:00 PM(Friday 3:30 PM)</span>
</div>
<div class='media'>
<a href='javascript:void(0);' onclick='openEmailDialog("123456")'>email</a> |
<a href='javascript:void(0);' onclick='openMap("123456")'>map-it</a> |
<a href='javascript:void(0);' onclick='openUpdateDialog("123456")'>update</a><br>
<div id="media_123456" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
</div>
</div><!-- END record -->
</div><!-- END country -->
JAVASCRIPT
// encode function
function htmlEscape(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/ /g,'+');
}
function openMap(recID) {
$('#media_'+recID).html('<div class="modal-header">'+
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'+
'<h3 id="myModalLabel">Embassy Location</h3>'+
'</div><div id=box_'+recID+'></div>');
$('#media_'+recID).css({ 'height':'400px', 'width':'600px' });
$('#box_'+recID).css({ 'height':'100%', 'width':'100%' });
// activate the modal before loading it with the map
$('#media_'+recID).modal('show');
// capture the content and strip it of HTML, then encode it
var embAddr = $.trim($('#'+recID+' .contactInfo .embAddr').text().replace(/[\s\xA0]{2,}/g, ' '));
embAddr = htmlEscape(embAddr);
console.log(embAddr);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': embAddr}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// I thought this would wait for the modal('show') to load completely before firing
$('#media_'+recID).on('shown', function() {
var latitude = results[0].geometry.location.lat() ;
var longitude = results[0].geometry.location.lng();
console.log('lat: ',latitude,' long: ',longitude);
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(latitude+','+longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("box_"+recID), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
})
})
} else {
$('#media_'+recID).html('Could not find this location from the address given.<p>'+embAddr+'</p>');
$('#media_'+recID).modal('show');
}
})
}
順便說一句,在某些瀏覽器,你會看到在左邊的地圖控件的一個問題。只要刪除線「最大寬度:100%;」來自img在bootstrap.css中的定義 –
甜。完美工作。僅供參考,因爲我的ID是動態的,我的CSS最終看起來像\t [id^='box_'] img,{max-width:none; }。這解決了一些顯示問題。 – royhink