Загрузка карты Google в Bootstrap modal

Question

Вставка карты Google в bootstrap modal дает мне результат «серого окна», и я не вижу проблемы.

Я думал, что срабатывала модель («шоу»), а затем загрузить карту на («показано»), чтобы избежать конфликтов говорили здесь 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">wasamb@um.dk</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, '&lt;') 
       .replace(/>/g, '&gt;') 
       .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'); 
      } 
     }) 
    } 

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('<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).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.<p>'+embAddr+'</p>'); 
     $('#media_'+recID).modal('show'); 
     } 
    }) 
    }); 
    $('#media_'+recID).modal('show'); 
}