在twitter引导模式下动态加载谷歌地图

我试图在twitter引导程序的模式窗口内动态添加地图，但似乎无法工作。在twitter引导模式下动态加载谷歌地图

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
     <style type="text/css"> 
    #map-canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

#map-canvas { 
    width:100%; 
    height:400px; 
} 
     </style> 
    </head> 

    <body > 

     <h1 class="">Lazy Load Google Map</h1> 
<a href="javascript:;" class="view" data-lat="23, 18.33">Launch Map Modal</a> 

<div class="modal fade" id="myMapModal"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title">Modal title</h4> 

      </div> 
      <div class="modal-body"> 
       <div class="container"> 
        <div class="row"> 
         <div id="map-canvas" class=""></div> 
        </div> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
    </div> 
    <!-- /.modal --> 

     <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 



     <script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 


<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js?sensor=false&extension=.js&output=embed"></script> 





     <script type='text/javascript'> 

     $(".view").click(function(){ 
      var element = $(this); 

     var map;   
      var myCenter=new google.maps.LatLng(element.attr("data-lat")); 
var marker=new google.maps.Marker({ 
    position:myCenter 
}); 
$('#myMapModal').modal('show'); 

function initialize() { 
    var mapProp = { 
     center:myCenter, 
     zoom: 14, 
     draggable: false, 
     scrollwheel: false, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }; 

    map=new google.maps.Map(document.getElementById("map-canvas"),mapProp); 
    marker.setMap(map); 

    google.maps.event.addListener(marker, 'click', function() { 

    infowindow.setContent(contentString); 
    infowindow.open(map, marker); 

    }); 
}; 
google.maps.event.addDomListener(window, 'load', initialize); 

google.maps.event.addDomListener(window, "resize", resizingMap()); 
$('#myMapModal').on('show.bs.modal', function() { 
    //Must wait until the render of the modal appear, thats why we use the resizeMap and NOT resizingMap!! ;-) 
    resizeMap(); 
}) 

function resizeMap() { 
    if(typeof map =="undefined") return; 
    setTimeout(function(){resizingMap();} , 400); 
} 

function resizingMap() { 
    if(typeof map =="undefined") return; 
    var center = map.getCenter(); 
    google.maps.event.trigger(map, "resize"); 
    map.setCenter(center); 
} 

      }); 



     </script> 


    </body> 
</html>

请帮我一把。

来源

2014-10-16 Sujay sreedhar

看看这个例子：http://www.bootply.com/zhqU9Vhu4k – ZimSystem 2014-10-16 17:33:16

我已经看到它了，事情是我想通过适当的链接从位置列表中动态地加载地图 – 2014-10-17 02:59:15

通过数据开放式属性

<a href="#" data-lat="23, 18.33" data-toggle="modal" data-target="#myMapModal"> 
    Launch Map Modal 
</a>

创建功能与参数初始化（参数）

<script type='text/javascript'> 
    var element = $(this); 
    var map; 

    function initialize(myCenter) { 
     var marker = new google.maps.Marker({ 
      position: myCenter 
     }); 

     var mapProp = { 
      center: myCenter, 
      zoom: 10, 
      //draggable: false, 
      //scrollwheel: false, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     map = new google.maps.Map(document.getElementById("map-canvas"), mapProp); 
     marker.setMap(map); 
    }; 
</script>

上shown.bs.modal事件与您调用按钮获取参数调用它（$ （e.relatedTarget））

<script type='text/javascript'> 

    $('#myMapModal').on('shown.bs.modal', function(e) { 
     var element = $(e.relatedTarget); 
     var data = element.data("lat").split(',') 
     initialize(new google.maps.LatLng(data[0], data[1])); 
    }); 

</script>

来源

2014-10-16 17:29:48 tmg

我在'initialize'后面添加了'google.maps.event.trigger（map，'resize'）;'' （新的google.maps.LatLng（数据[0]，数据[1]））;'之后，它就像一个魅力谢谢你:) – 2014-10-17 03:06:04

好的解决方案。感谢你的分享。（完美适合我，无需添加调整大小） – 2015-02-14 20:43:39

在twitter引导模式下动态加载谷歌地图

回答

相关问题