IT이야기

Firefox에서 원격으로 Google Maps V3를 사용할 때 "google이 정의되지 않았습니다."

cyworld 2021. 4. 21. 21:23
반응형

Firefox에서 원격으로 Google Maps V3를 사용할 때 "google이 정의되지 않았습니다."


수수께끼는 다음과 같습니다. Google Maps V3 및 jQuery를 사용하는 페이지가 있습니다. FF5, Chrome 및 Safari에서 모두 로컬에서 잘 작동했습니다.

웹 사이트에 업로드 한 후 Google 개체를 사용하려고하면 첫 번째 줄에 "google is not defined"오류가 표시됩니다.

var defaultLocation = new google.maps.LatLng(lat, lng);

그것은 단지 FF에서 발생 하고 원격으로 만 발생합니다 (I, 그것은 잘 작동 로컬 FF로 파일을로드하는 경우, 즉). Chrome 및 Safari는 Android 및 iPod 브라우저와 마찬가지로 훌륭하게 작동하는 것 같습니다.

지금까지 시도한 내용은 다음과 같습니다.

  1. 섹션의 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>맨 위로 이동 했습니다 <head>.
  2. 의 모든 내용을 $(function() {...});호출 initialize()및 추가 된 함수 로 이동<body onload="initialize()">
  3. 스크립트 및 CSS 파일 순서로 재생
  4. URL http://maps.google.com/maps/api/js?sensor=false 를 FF 주소 상자에 붙여넣고 합법적 인 스크립트를 받고 있음을 확인했습니다.

그러나 이것은 원격 시스템의 FF에서만 발생하고 그렇지 않으면 잘 작동하기 때문에 내 코드와 관련이 없다고 생각합니다. FF5의로드 순서가 잘못되었을 수 있습니다. 다른 브라우저와 다른 방식으로 네트워크 리소스의 우선 순위를 지정할 수 있습니다. 나는이 시점에서 그것을 어떻게 만들어야할지 정말로 모른다.

도움을 주시면 감사하겠습니다.
사람

업데이트 :
다음 사실을 추가하고 싶었습니다. 이전 Mac에서 시도한 후 Windows에서 FF5를 시도하고 똑같은 동작을 복제했습니다.
좋은 측정을 위해 Pale Moon도 시도했습니다-동일한 결과. Chrome 14, Opera 11.50, 심지어는 IE9 (테스트 계획에 포함되지 않았 음)도 작동합니다. 이제 Mac과 Windows 7 모두에서 해당 페이지에서 실패하는 FF5입니다.


나는 '구글이 정의되지 않았다'고 여러 번 직면했다. 아마도 Google Script는 FF-addon BTW로 제대로로드되지 않는 문제가 있습니다. FF에는 다시 시작 옵션이 있습니다 (예 : 창 재부팅) 도움말> 추가 기능을 사용하지 않고 다시 시작


Gmap3을 사용하는 동안 "google is not defined"오류가 발생했습니다. 문제는 'google'을 포함하기 전에 'gmap3'을 포함했기 때문에 순서를 뒤집 었습니다.

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="/assets/gmap3.js?body=1" type="text/javascript"></script>

나를 도운 또 다른 제안 :

다음은 나에게 일어난 일입니다. => 내 스크립트가 페이지를로드 할 때 3 번에 한 번씩 작동했고 오류는«google is not defined»입니다.

Google지도를 사용하는 내 기능은 내 jQuery 문서의 준비 기능에 있습니다.

$(function(){
   //Here was my logic
})

이 코드를 추가하여 작동하는지 확인했습니다.

$(function(){
   $(window).load(function(){
       //Here is my logic now
   });
});

매력처럼 작동합니다. 문서 준비와 창로드의 차이점에 대한 자세한 내용을 보려면 여기에 대한 훌륭한 게시물이 있습니다 : window.onload vs $ (document) .ready ()

ready 이벤트는 HTML 문서가로드 된 후에 발생하고 onload 이벤트는 모든 콘텐츠 (예 : 이미지)도로드 된 후에 발생합니다.

onload 이벤트는 DOM의 표준 이벤트이며 ready 이벤트는 jQuery에 고유합니다. ready 이벤트의 목적은 문서가로드 된 후 가능한 한 빨리 발생하여 페이지의 요소에 기능을 추가하는 코드가 모든 콘텐츠가로드 될 때까지 기다릴 필요가 없도록하는 것입니다.


이것을 사용해보십시오 :

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

이 시도:

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

그것은 나를 위해 작동합니다 ... 요점은 HTTP를 HTTPS로 변경하는 것입니다.


스크립트 유형 추가

<script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>

따라서 중요한 부분은 text / javascript 유형입니다.


Firefox 23에는 기본적으로 혼합 콘텐츠 차단 활성화가 설정되어 있습니다 (로컬 비활성화). 보안 연결 및 일부 비보안 API를 사용하는 경우에도 Google의 일부 API를 차단합니다.

이를 비활성화하려면 보안되지 않은 콘텐츠가있을 때 위치 표시 줄에 나타나는 방패를 클릭하고 '보호 비활성화'를 설정 한 다음 위치 표시 줄의 노란색 느낌표를 확인해야합니다.

https://blog.mozilla.org/.../mixed-content-blocking-enabled-in-firefox-23/

API url에서 http 프로토콜을 https로 대체 할 수도 있습니다. API가 보안 연결에서도 제공되는 경우 경고가 표시되지 않습니다.

그것은 나를 위해 작동합니다.


다음을 시도 할 수 있습니다.

먼저 async defer. 이것은 스크립트가 사용 가능하고 페이지 구문 분석이 완료되는 즉시 비동기 적으로 실행되도록 지정합니다.

둘째, initMap()HTML 내부의 스크립트 태그에 함수를 콜백으로 추가합니다 . 이런 식으로 map은 document.ready 및 window.onload 전에 초기화됩니다.

<script async defer src="{{ 'https://maps.googleapis.com/maps/api/js?key=$key&language='.$language.'&region='.$country.'&callback=initMap' }}"></script>

<script>
    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -34.397, lng: 150.644},
            zoom: 4,
            disableDefaultUI: false,
            scrollwheel: false,
            styles: [{ ... }]
        });
    }
</script> 

마지막으로 js 파일 내에서 map 객체를 사용할 수 있습니다.


확실하지는 않지만 여기에 최선의 제안이 있습니다.

jQuery를 사용하고 있습니다. 따라서 이벤트를 설정하는 대신 $ (function () {...}); 초기화를 수행하십시오. 이것을 사용하는 이유는 페이지의 모든 스크립트가로드되었는지 확인하고 onload body 태그를 사용하는 것처럼 하나의 init 함수에만 국한되지 않기 때문입니다.

또한 Javascript 코드가 Google 포함 뒤에 있는지 확인하십시오. 그렇지 않으면 Google 객체가 생성되기 전에 코드가 실행될 수 있습니다.

이 페이지에서 이벤트 순서에 대해 살펴볼 것을 제안합니다.

http://dean.edwards.name/weblog/2005/09/busted/


호출하는 순서, 라이브러리, 다음 순서를 확인하십시오.

  1. <script type = "text/javascript" src = "../resources/googleMaps/jquery-ui.js"></script>

  2. <script type = "text/javascript" src = "../resources/googleMaps/jquery-ui.min.js"></script>

  3. <script type = "text/javascript" src="http://maps.googleapis.com/maps/api/

  4. 메 토드 <script type = "text/javascript" src = "googleMaps/mapa.js"></script>

나는이 문제를 가지고 있었고 방금 주문을 조정했습니다.


변경

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API"> 
      function(){
            myMap()
                }
</script>

그리고 그것을 만들었다

<script type="text/javascript">
      function(){
            myMap()
                }
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API"></script>

작동했습니다 :)


In my case I was loading the google script via http while my server had SSL and its being loaded over https. So I had to load script via https


Try this. Tt worked with Anguler7


I think the easiest trick is:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&callback=initMap">google.maps.event.addDomListener(window,'load', initMap);</script>

It will init the map when your app is ready.

Check this.

ReferenceURL : https://stackoverflow.com/questions/6660955/google-is-not-defined-when-using-google-maps-v3-in-firefox-remotely

반응형