GoogleマップV3 - グーグルが

Question

が定義されていない取得中にエラーが最初にGoogleマップコードで開始できます：ここで

var map; 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(52.4357808, 4.991315699999973), 
     zoom: 2, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
} 

var seg = { 
    1: 'invesCastProd', 
    2: 'forged', 
    3: 'airframe', 
    5: 'corp', 
    6: 'structurals' 
} 

var comp = { 
    1: 'structurals', 
    2: 'airfoils', 
    3: 'airfoils', 
    4: 'wyman', 
    5: 'energy', 
    6: 'strucComp', 
    7: 'mechHard', 
    8: 'engineProd', 
    9: 'corp', 
    10: 'aero', 
    12: 'timet', 
    13: 'specMetals' 
} 

    var myJSON = {}; 
    var myMarkers=[]; 

    $.getJSON("/pcc-common/static/pcc-locations.json", function(json1) { 
     myJSON=json1; 
     $.each(json1, function(key, data) { 
      var latLng = new google.maps.LatLng(data.latitude, data.longitude); 
      // Creating a marker and putting it on the map 
      var marker = new google.maps.Marker({ 
       position: latLng 
      }); 
      myMarkers[key]=marker; 
      marker.setMap(map); 

      var infoWindow = new google.maps.InfoWindow(); 

      google.maps.event.addListener(marker, 'click', function() { 

       if (infoWindow) {infoWindow.close();} 
       infoWindow = new google.maps.InfoWindow({ 
        content: "<h5>" + data.display_name + "</h5>" + 
        "<div>" + data.street+ "</div>" + 
        "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" + 
        "<div class='mapPhoneNum'>" + data.telephone + "</div>" + 
        "<a href=" + data.web_url + ">Website</a>" 
       }); 
       infoWindow.open(map, marker); 
       map.setZoom(15); 
       map.panTo(this.getPosition()); 

       google.maps.event.addListener(infoWindow,'closeclick',function(){ 
        resetMapOrigin(); 
       }); 

      }); 

      filterMarkers = function(category){ 

       var component = category.data("component_id"); 
       var segment = category.data("segment_id") 

       setMapOnAll(null); 
       resetMapOrigin(); 

       var filteredMarkers=[]; 

       $.each(myJSON, function(key, data) { 


        if(typeof(component)!="undefined"){ 

         if((myJSON[key].component_id == component) && (myJSON[key].segment_id == segment)){ 
         filteredMarkers.push(key); 
         } 

        }else{ 
         if(myJSON[key].segment_id == segment){ 
         filteredMarkers.push(key); 
         } 
        } 
       }); 

       for(i=0;i<filteredMarkers.length;i++){ 
        myMarkers[filteredMarkers[i]].setMap(map); 
       } 
      } 

      function setMapOnAll(map) { 
       for (var i = 0; i < myMarkers.length; i++) { 
        myMarkers[i].setMap(map); 
       } 
      } 

      function resetMapOrigin(){ 
       map.setZoom(2); 
       map.setCenter({lat:52.4357808,lng:4.991315699999973}); 
      } 
     }); 

    }); 

は、HTML内の初期化スクリプトです：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAMNhLC5984PO876GF8nesnOqbiKkblvuBo&callback=initialize" async defer></script> 

だから何が起こっていますさ時にはサイトを開いて、すべてのピンをうまく読み込みます。リフレッシュをクリックすると、すべてのピンが再び正常にロードされます。リフレッシュをクリックし、再度読み込みます。 [再度更新]をクリックすると、エラーUncaught ReferenceError: google is not defined(...)がスローされます。また、複数回リフレッシュすることもできますが、それでもエラーは発生します。次に突然リフレッシュをクリックすると、NOエラーですべてのピンがロードされます。だから基本的にはいつか動作し、それ以外の時はエラーです。

私は何が起こっているのか、なぜこれをやっているのか理解できません。

エラーが発生している行は、var latLng = new google.maps.LatLng(data.latitude, data.longitude);です（これは最初の「google」呼び出しであることが明らかです）。

誰でもこのことを行う理由を教えてもらえますか？

これは開発サーバー上にあるため、オンラインではありません。しかし、再びそれは時々動作し、時にはそれは私にエラーを与える。

ありがとうございました！

Answer 1

GoogleマップSDKを使用するすべてのコードは、initialize機能で実行する必要があります。あなたの例では、JSONがGoogleマップの前に読み込まれる可能性があります。そのため、時々エラーが発生することがあります。

$.getJSONのコールバックを別の関数に移動し、マップの初期化後に要求をトリガーする方法があります。

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(52.4357808, 4.991315699999973), 
     zoom: 2, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    // Fetch locations from the server 
    $.getJSON("/pcc-common/static/pcc-locations.json", onLocationsFetched) 
} 

function onLocationsFetched(json) { 
    myJSON=json1; 
    $.each(json1, function(key, data) { 
     ...