獲取谷歌未定義的錯誤可能是因爲谷歌地圖的異步加載API

-1

我在我的jsp頁面中有兩個Javascript加載，第一個加載谷歌地圖API，第二個加載調用google.maps.OverlayView的JS文件。由於googleapis的異步加載，對google的引用顯然失敗，但即使我刪除異步並推遲了，問題仍然存在。有人可以推薦一種解決方法嗎？獲取谷歌未定義的錯誤可能是因爲谷歌地圖的異步加載API

<%@ page language="java" contentType="text/html; charset=UTF-8" 
     pageEncoding="UTF-8"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<!DOCTYPE html> 
<html> 
<head> 
<script src="https://maps.googleapis.com/maps/api/js?key=mykey>"> 
</script> 

<!-- This file uses Google APIs --> 
<script src="<c:url value="/resources/js/InfoBox.js"/>"> 
</script> 
</head> 
<body> 
<script> 
//This is the callback function after Google Maps API loads 
function initMap() { 
    var container=document.getElementById("map"); 
    var anantapur = {lat: 14.68, lng: 77.6}; 

    var mapOptions = { 
     styles: mapStyle, 
     zoom: 6, 
     minZoom: 5, 
     maxZoom: 10, 
     center: anantapur 
    }; 
    var newMap = new google.maps.Map(container, mapOptions); 
} 
</script> 
</body> 
</html>

以上將導致InfoBox.js中使用谷歌地圖對象的行內的錯誤'谷歌未定義'。

一般情況下，如果我只能異步加載Google API腳本，如何包含使用Google API對象的其他腳本文件？

來源

2017-08-17 Balaji Rathakrishnan

難道你不能在第一次加載後在回調中加載第二個文件嗎？ –

請提供證明問題的[mcve]。 – geocodezip

謝謝。我這樣做 - 我在回調中動態地加載第二個文件，它工作。我是JavaScript新手，並不熟悉動態加載，並發現如何在Stackflow中執行此操作。 –

正如Chris Hawkes所建議的那樣，我在回調函數中動態地加載了第2個文件，它工作正常。

<%@ page language="java" contentType="text/html; charset=UTF-8" 
     pageEncoding="UTF-8"%> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<!DOCTYPE html> 
<html> 
<head> 
<script src="https://maps.googleapis.com/maps/api/js?key=mykey>" async defer > 
</script> 

</head> 
<body> 
<script> 
function loadScript(url) 
{ 
    document.body.appendChild(document.createElement("script")).src = url; 
} 

//This is the callback function after Google Maps API loads 
function initMap() { 
    var container=document.getElementById("map"); 
    var anantapur = {lat: 14.68, lng: 77.6}; 

    //dynamic load of script file that uses google api objects 
    loadScript("<c:url value="/resources/js/InfoBox.js"/>"); 

    var mapOptions = { 
     styles: mapStyle, 
     zoom: 6, 
     minZoom: 5, 
     maxZoom: 10, 
     center: anantapur 
    }; 
    var newMap = new google.maps.Map(container, mapOptions); 
} 
</script> 
</body> 
</html>

來源

2017-08-19 12:20:53

獲取谷歌未定義的錯誤可能是因爲谷歌地圖的異步加載API

回答

相關問題