加載一個新的谷歌地圖在當前頁面加載AJAX

我嘗試與阿賈克斯負荷我的索引頁加載Java腳本谷歌地圖V3：加載一個新的谷歌地圖在當前頁面加載AJAX

我知道它有很多相同的問題，但我做不到失去了他們。

的index.php

<!DOCTYPE html> 
    <html> 
     <head> 
     <script src="js/vendor/jquery.min.js"></script> 
     <style type="text/css"> 
      html, body { height: 100%; margin: 0; padding: 0; } 
      #map { height: 100%; } 
     </style> 
     </head> 
     <body> 
     <div id="mapc"></div> 

     <span id="btn">load map</span> 

     <script type="text/javascript"> 

    var map; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
     }); 
    } 

    $(document).ready(function(){ 
     $("#btn").click(function(){ 
     $("#mapc").load("map.php"); 
     initMap(); 
     }); 
    }); 
     </script> 
     <script async defer 
      src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
     </script> 
     </body> 
    </html>

注：我需要谷歌API鏈接在index.php文件，因爲我打算在index.php文件anoher谷歌地圖了。

也這是map.php

<div id="map"></div>

此外，在控制檯我只是得到這個錯誤：

js?callback=initMap:74 Uncaught TypeError: Cannot read property 'offsetWidth' of null_.Af @ js?callback=initMap:74_.hg @ js?callback=initMap:81initMap @ (index):19(anonymous function) @ js?callback=initMap:87(anonymous function) @ js?callback=initMap:49_.ac @ js?callback=initMap:46oc @ js?callback=initMap:49(anonymous function) @ js?callback=initMap:123google.maps.Load @ js?callback=initMap:21(anonymous function) @ js?callback=initMap:122(anonymous function) @ js?callback=initMap:123 
js?callback=initMap:74 Uncaught TypeError: Cannot read property 'offsetWidth' of null_.Af @ js?callback=initMap:74_.hg @ js?callback=initMap:81initMap @ (index):19(anonymous function) @ (index):28n.event.dispatch @ jquery.min.js:3r.handle @ jquery.min.js:3

來源

2016-02-16 elize

你需要做的只是initMap();是的地圖後。已加載php。

所以，你需要調用load功能與參數：

URL。

回調函數。

jQuery的文檔

Callback Function

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

在你可以肯定的是，map.php加載回調函數和#map DIV的DOM存在。

$("#mapc").load("map.php", function() { initMap(); });

此外，從網址

來源

2016-02-16 09:55:03

刪除?callback=initMap你的問題是元素（）不存在的頁面加載。點擊「#btn」後添加第一個。

它的工作原理點擊後首次見：

$(document).ready(function(){ 
 
     $("#btn").click(function(){ 
 
     $("#mapc").append('<div id="map"></div>'); 
 
     initMap(); 
 
     }); 
 
    });

html, body { height: 100%; margin: 0; padding: 0; } 
 
      #map { height: 100%;  width: 500px; 
 
    height: 500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
var map; 
 

 
    function initMap() { 
 
     map = new google.maps.Map(document.getElementById('map'), { 
 
     center: {lat: -34.397, lng: 150.644}, 
 
     zoom: 8 
 
     }); 
 
    } 
 
</script> 
 

 
     <div id="mapc"></div> 
 

 
     <button id="btn">load map</button> 
 

 
     <script async defer 
 
      src="https://maps.googleapis.com/maps/api/js"> 
 
     </script>

只是刪除了參數，它工作正常，沒有錯誤「回調= initMap？」。

來源

2016-02-16 09:55:07 kaito

加載一個新的谷歌地圖在當前頁面加載AJAX

回答

相關問題