Googleマップの非同期ロードのためにGoogleで定義されていないエラーが発生する可能性があります。

-1

jspページには2つのJavascriptロードがあり、最初はgoogle.maps.OverlayViewを呼び出すJSファイルを読み込みます。 googleへの参照はgoogleapisの非同期ロードのためにはっきりと失敗しますが、非同期と遅延を削除しても問題は解決しません。誰かがこれを回避する方法をお勧めしますか？Googleマップの非同期ロードのためにGoogleで定義されていないエラーが発生する可能性があります。

<%@ 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>

上記は、Googleマップのオブジェクトを使用していますInfoBox.js内側のラインで 'が定義されていないGoogleのエラーが発生します。

一般にGoogle APIスクリプトを非同期に読み込むことができる場合は、Google APIオブジェクトを使用する他のスクリプトファイルをどのように含めることができますか？

出典

2017-08-17 Balaji Rathakrishnan

最初の読み込み後にコールバックで2番目のファイルを読み込むことはできませんか？ –

問題を示す[mcve]を入力してください。 – geocodezip

ありがとうございます。私はちょうどこれをやった - 私は2番目のファイルを動的にコールバックにロードし、それは働いた。私は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

Googleマップの非同期ロードのためにGoogleで定義されていないエラーが発生する可能性があります。

答えて

関連する問題