jquery - 将谷歌地图加载到引导模式中

Question

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

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

非常感谢任何帮助

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' );
}