将Google Map加载到Bootstrap模式中

将Google地图插入引导程序模式会给我“灰色框”结果，但我没有看到问题。

我以为我会触发模型（’show’），然后加载地图（’显示’）以避免在此处讨论的冲突在Twitter Bootstrap创建的模式中显示Google地图

任何帮助非常感谢

HEAD ELEMENTS    HTML 
 
Denmark
 
 
 
 Danish Embassy in Washington DC, United States 
 
3200 Whitehaven St.
NW 20008-3683 
 Tel: [phone]
 Fax: [phone]
 E-mail: [e-mail]
 Website: www.ambwashington.um.dk
 Details: n/a
 Hours: 8:30 AM - 4:00 PM(Friday 3:30 PM) 
 
 email | map-it | update
 
 
 
 
 

JAVASCRIPT

  // encode function function htmlEscape(str) { return String(str) .replace(/&/g, '&') .replace(/"/g, '"') .replace(/'/g, ''') .replace(//g, '>') .replace(/ /g,'+'); } function openMap( recID ) { $( '#media_'+recID ).html( '
'+ '×'+ '
Embassy Location
'+ '
' ); $( '#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.
'+embAddr+'
' ); $( '#media_'+recID ).modal( 'show' ); } }) } 

Answer 1

首先，地图初始化中存在错误：

 var mapOptions = { zoom: 7, center: new google.maps.LatLng( latitude+','+longitude ), mapTypeId: google.maps.MapTypeId.ROADMAP } 

应该

 var mapOptions = { zoom: 7, center: new google.maps.LatLng( latitude, longitude ), mapTypeId: google.maps.MapTypeId.ROADMAP } 

我建议在地理编码调用之前设置显示的事件。

所以，这个应该工作

 function openMap( recID ) { $( '#media_'+recID ).html( '
'+ '×'+ '
Embassy Location
'+ '
' ); $( '#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).on('shown', function () { // 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) { 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.
'+embAddr+'
' ); $( '#media_'+recID ).modal( 'show' ); } }) }); $( '#media_'+recID ).modal( 'show' ); }