Google地图无法使用jquery加载

In my Django app I would like to load google map but it doesn't work. I have this situation:

在我的Django应用程序中，我想加载谷歌地图，但它不起作用。我有这种情况：

index.html

的index.html

    <!DOCTYPE html> 
    <html>
     <head>
        # here other css
        <style>
          #mapCanvas {height: 400px;width: 100%;}    
          .dynamicCanvas {height: 400px;width: 100%;}
        </style>
     </head>
     <body>
       <div id="loadpage"></div>     
       <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>

       # here other plugin 

       <script>
         jQuery(document).ready(function($) {

             // click on #btn_map and open the page with the map 
             $( document ).on( "click", '#btn_map', function( e ) {
               e.preventDefault();
               var href = $(this).attr('data-href');                                                                
               $('#loadpage').load("./mypage.html"));          

               // google map initialize  
               function initialize() {
                    var latlng = new google.maps.LatLng(-34.397, 150.644);
                    var myOptions = {
                        zoom: 8,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                   var map = new google.maps.Map(document.getElementById("mapCanvas"),
                myOptions);
                   }
           google.maps.event.addDomListener(window, "load", initialize);  
           });       

         });   

       </script>
  </body>
</html>

mypage.html

的mypage.html

<div>
   <div id="mapCanvas" class="dynamicCanvas"></div>
</div>

In the console I don't get errors. Simply the mypage.html load and the google map doesn't load. Can you help me please?

在控制台中我不会出错。只是mypage.html加载和谷歌地图不会加载。你能帮我吗？

1 个解决方案

#1

It won't work. You can not bind window load function in a button click for a window which has been already loaded.

它不会起作用。对于已加载的窗口，您无法在按钮单击中绑定窗口加载功能。

Note: Write all this code in that file which has div for map.
注意：将所有此代码写入包含map for map的文件中。

just exclude initialize() function from document.ready

只需从document.ready中排除initialize（）函数

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapCanvas"),
        myOptions);
}

and call it from button click

并从按钮单击调用它

 jQuery(document).ready(function($) {

      // click on #btn_map and open the page with the map 
      $(document).on("click", '#btn_map', function(e) {
          initialize();
      });
  });

#1