将Google地图加载到Bootstrap模式 [英] Loading Google Map into Bootstrap modal

问题描述

将Google地图插入引导模式会给我灰色方块的结果，但我看不到问题。

我以为我会激发模型（'show'），然后加载地图（'显示'）以避免这里讨论的冲突

非常感谢任何帮助

 头元素
< script src =http://maps.googleapis.com/maps/api/ ？JS客户= [客户端ID]安培;传感器=假安培; v = 3.13\" >< /脚本> 
< script type =text / javascriptsrc =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>丹麦< / h3> 
< div id ='123456'class ='record'><！ -  dynamic  -  id = recID in functions  - > 
< div class =contactInfo> 
< div class =embName> 
< em>丹麦驻华盛顿特区大使馆，美国< / em> 
< / div> 
< div class =embAddr> 3200 Whitehaven St.< br> N.W。 20008-3683< br>< / div> 
< strong>电话：< / strong>< span class =phone> [phone]< / span>< br> 
< strong>传真：< / strong> [phone]< br> 
< strong>电子邮件：< / strong>< span class =email> [e-mail]< / span>< br> 
< strong>网站：< / strong>< span class =website> www.ambwashington.um.dk< / span>< br> 
< strong>详情：< / strong>< span class =详情>不适用< / span>< br> 
 小时：< / strong>< span class =小时> 8:30 AM  -  4:00 PM（星期五下午3:30）< / span> 
< / div> 
< div class ='media'> 
< a href ='javascript：void（0）;'onclick ='openEmailDialog（123456）'>电子邮件< / a> | 
< a href ='javascript：void（0）;'onclick ='openMap（123456）'> map-it< / a> | 
< a href ='javascript：void（0）;'onclick ='openUpdateDialog（123456）'>更新< / a>< br> 
 
 ; 
< / div> 
< / div><！ -  END记录 - > 
< / div><！ -  END country  - > 
  

JAVASCRIPT

  //编码函数
函数htmlEscape（str）{
 return String（str）
 .replace（/& / g，'& amp;'）
 .replace（// g，'& quot;'）
 .replace（/'/ g，'&＃39;'）
 .replace（/< / g，' & lt;'）
 .replace（/> / g，'& gt;'）
 .replace（/ / g，'+'）; 
} 
 
函数openMap（recID）{
 
 $（'#media _'+ recID）.html（'< div class =modal-header>'+ 
 '< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>×< / button>'+ 
'< h3 id =myModalLabel > Embassy Location< / h3>'+ 
'< / div>< div id = box _'+ recID +'>< / div>'）; 
 $（'#media_ '+ recID）.css（{'height'：'400px'，宽度： 600像素}）; 
 $（#box _ + recID）的CSS（{高度： 100％，宽度： 100％}）; 
 
 //在载入地图之前激活模式
 $（'#media _'+ recID）.modal（'show'）; 
 
 //捕获HTML内容并剥离它，然后对其进行编码
 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）{
 
 / /我认为这会等待模式（'show'）在发射
 $（'#media _'+ recID）.on（'shown'，function（）{
 var latitude =结果[0] .geometry.location.lat（）; 
 var longitude = results [0] .geometry.location.lng（）; 
 
 console.log（'lat：'，纬度，'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（'找不到这个位置< p>'+ embAddr +'< / p>'）; 
 $（'#media _'+ recID）.modal（'show'）; 
 
}）
} 
  

解决方案首先，映射初始化中有一个错误：

  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 
} 
  

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

所以，这个应该工作

pre $ function openMap（recID）{
$（'#media _'+ recID） .html（'< div class =modal-header>'+
'< button type =buttonclass =closedata-dismiss =modalaria-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％'}）;

//在载入地图之前激活模式

$（'＃media _'+ recID）.on（'shown'，function（）{
//捕获内容并剥离它的HTML，然后对其进行编码
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（纬度，经度），
mapTypeId：google.maps.MapTypeI d.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（'无法从给定的地址找到此位置。< p> + embAddr +'< / p>'）;
$（'#media _'+ recID）.modal（'show'）;
}
}）
}）;
$（'#media _'+ recID）.modal（'show'）;
}


Inserting a Google Map into a bootstrap modal is giving me the 'gray box' result, and I don't see the issue.

I thought I'd fire the model('show'), then load the map on('shown') to avoid the conflicts talked about here Showing a Google Map in a modal created with Twitter Bootstrap

Any help greatly appreciated

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">[phone]</span><br>
                    <strong>Fax: </strong>[phone]<br>
                    <strong>E-mail: </strong><span class="email">[e-mail]</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' );
            }
        })
    }

解决方案

First of all, there is an error in the map initialization:

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

should be

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

And I recommend to setup shown event before geocoding call.

So, this one should work

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

这篇关于将Google地图加载到Bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！