Javascript 在引导模式上显示google地图_Javascript_Google Maps_Twitter Bootstrap

Javascript 在引导模式上显示google地图

javascript google-maps twitter-bootstrap

Javascript 在引导模式上显示google地图,javascript,google-maps,twitter-bootstrap,Javascript,Google Maps,Twitter Bootstrap,我的bootstrap3模式： <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header">

我的bootstrap3模式：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="map-canvas" style="width:530px; height:300px;"></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>
  </div>
</div>


&时代；
情态标题
接近
保存更改

我的javascript：

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}"></script>
<script type="text/javascript">



        $("#myModal").on("shown.bs.modal", function () {
            init();
            google.maps.event.trigger(map, "resize");
        });

        var lat = 10.444598;
        var lon = -66.9287;

        function init() {
            var mapDiv = document.getElementById('map-canvas');
            var map = new google.maps.Map(mapDiv, {
                center: new google.maps.LatLng(lat, lon),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lon),
                map: map,
                title: 'Hello World!'
            });
        }



    }

</script>


$（“#myModal”）.on（“show.bs.modal”，函数（）{
init（）；
google.maps.event.trigger（map，“resize”）；
});
var lat=10.444598；
var-lon=-66.9287；
函数init（）{
var mapDiv=document.getElementById（'map-canvas'）；
var map=new google.maps.map（mapDiv{
中心：新google.maps.LatLng（lat，lon），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker=new google.maps.marker({
位置：新google.maps.LatLng（lat，lon），
地图：地图，
标题：“你好，世界！”
});
}
}

我在stackoverflow上读了一些关于这个问题的文章，但我试图在代码中实现解决方案。然而，我的模态仍然是空白的。我做错了什么？


<!DOCTYPE html>
<html>

<head>
    <title>Map</title>

</head>

<body onLoad="init()">
    <div id="map_canvas" style="width:800px; height:500px"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript">
        $("#myModal").on("shown.bs.modal", function () {
            init();
            google.maps.event.trigger(map, "resize");
        });

        var lat = 10.444598;
        var lon = -66.9287;


        function init() {

            var myOptions = {
                zoom: 6,
                center: new google.maps.LatLng(lat, lon),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lon),
                map: map,
                title: 'Hello World!'
            });
        }

        google.maps.event.addDomListener(window, 'load', init);
    </script>
</body>

</html>

地图
$（“#myModal”）.on（“show.bs.modal”，函数（）{
init（）；
google.maps.event.trigger（map，“resize”）；
});
var lat=10.444598；
var-lon=-66.9287；
函数init（）{
变量myOptions={
缩放：6，
中心：新google.maps.LatLng（lat，lon），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（'map_canvas'），myOptions）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（lat，lon），
地图：地图，
标题：“你好，世界！”
});
}
google.maps.event.addDomListener（窗口'load'，init）；

如果将Google地图添加到ModalWindow，您可能会遇到如下所述的不同问题：

我试图避免这些加载问题：

 <div id="mapCanvas" class="map_popup"></div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h2 class="fontface" id="myModalLabel">Header</h2> 
</div> 

<div class="modal-body">
    <div class="load_map">
</div>

希望这有帮助

您是否记录了show.bs.modal事件的触发？至少有两个自由度，你仍然需要缩小范围，看看哪个部分不工作。看我的答案试试这个，它会运行良好。

//JS Part
var popupmap = (function() {

var map_popup, marker_popup, geocoder, latLng;

//init the code for the popup
var init = function() {

    geocoder = new google.maps.Geocoder();

    latLng = new google.maps.LatLng(52.524744168143755, 13.417694102972746);

    map_popup = new google.maps.Map(document.getElementById('mapCanvas'), {
        zoom: 10,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        streetViewControl: false,
        panControl:false,
        zoomControl: false 
    });


    google.maps.event.addListenerOnce(map_popup, 'idle', function(){
       $('.load_map').append($('#mapCanvas'));
    });


};