web-dev-qa-db-ja.com

FirefoxでGoogle Maps V3をリモートで使用する場合、「google is not defined」

私の難問は次のとおりです。GoogleMaps V3とjQueryを使用するページがあります。すべてFF5、Chrome、およびSafariでローカルに機能しました。

Webサイトにアップロードすると、Googleオブジェクトを使用しようとする最初の行に「google is not defined」エラーが表示されます

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

FFでのみ発生しますおよびリモートでのみ発生しますファイルをローカルで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、さらにはfrickin 'IE9（テスト計画に含まれていませんでした）も機能します。 MacとWindows 7の両方でFF5になり、そのページで失敗します。

javascriptfirefoxgoogle-mapscross-browser
53
Traveling Tech Guy

「googleは定義されていません」と何度か直面しました。おそらくGoogle Scriptには、FFアドオンBTWでうまくロードされないという問題があります。 FFには再起動オプション（ウィンドウの再起動など）がある[ヘルプ]> [アドオンを無効にして再起動する]

26
user841019

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>
21
Diego Pino

私を助けた別の提案：

私に起こったことは次のとおりです。=>私のスクリプトは3回に1回機能していましたが、ページを読み込んでいて、エラーは"googleが定義されていません"でした。

Googleマップを使用する私の機能は、jQueryドキュメントのready関数にありました

$(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イベントの目的は、ドキュメントが読み込まれた後、できるだけ早く発生するようにすることです。そのため、ページ内の要素に機能を追加するコードは、すべてのコンテンツの読み込みを待つ必要がありません。

18
Yann Chabot

これを使ってみてください：

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

これを試して：

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

それは私のために働いています...ポイントは、HTTPSをHTTPSに変更することです

6
danisupr4

スクリプトのタイプを追加します

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

したがって、重要な部分はtext/javascriptタイプです。

6
Julz

Firefox 23から、混合コンテンツブロッキングが有効になっていますがデフォルトで設定されています（ローカルで無効）。セキュリティで保護された接続とセキュリティで保護されていないAPIを使用する場合も、GoogleからのAPIをブロックします。

無効にするには、セキュリティで保護されていないコンテンツがある場合にロケーションバーに表示されるシールドをクリックし、「保護を無効にする」を設定してから、ロケーションバーの黄色の感嘆符を見る必要があります:(

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

API URLで、httpプロトコルをhttpsにいつでも置き換えることもできます。安全な接続でもAPIが提供されている場合-警告は表示されません。

わたしにはできる。

2
robson

以下を試すことができます：

まず、async deferを追加します。これは、スクリプトが使用可能になり、ページの解析が終了するとすぐにスクリプトが非同期に実行されることを指定します。

次に、initMap()関数をhtml内のスクリプトタグのコールバックとして追加します。このようにして、マップは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ファイル内でマップオブジェクトを使用できます。

1
tsveti_iko

これを試して。 TtはAnguler7と協力しました

0
Shanaka Kuruwita

私の場合、サーバーにSSLがあり、https経由でロードされている間に、http経由でGoogleスクリプトをロードしていました。そのため、https経由でスクリプトを読み込む必要がありました

0
Yinka

最も簡単なトリックは次のとおりです。

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

アプリの準備ができると、マップが初期化されます。

これを確認してください。

0
Mke Nt

確かではありませんが、ここに私の最善の提案があります。

JQueryを使用しています。したがって、イベントを設定する代わりに、実際に$（function（）{...}）を使用する必要があります。初期化を行います。これを使用する理由は、ページ上のすべてのスクリプトが確実に読み込まれ、onload bodyタグを使用する場合のように1つのinit関数だけに限定されないためです。

また、JavascriptコードがGoogleインクルードの後に​​あることを確認してください。そうしないと、Googleオブジェクトが作成される前にコードが実行される可能性があります。

イベントの順序については、このページをご覧になることもお勧めします。

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

0
Paul Mendoza

呼び出している順序、ライブラリ、次の順序を確認してください

  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>

私はこの問題を抱えていました。注文を調整しました。

0
Samael Pereira Simões

変更された

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

動いた ：）

0
Abhinav Anand