Google Maps不会加载jquery

Question

In my Django app I would like to load google map but it doesn't work. 在我的Django应用中，我想加载google map，但是它不起作用。 I have this situation: 我有这种情况：

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. 只需加载mypage.html即可，而不会加载google map。 Can you help me please? 你能帮我吗？

Answer 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. 注意：将所有这些代码写入具有div用于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();
      });
  });

Google Maps不会加载jquery

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-23 16:17:04

Google Maps不会加载jquery

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-23 16:17:04

解决方案1
1 已采纳 2015-06-23 16:17:04