JavaScriptからデータベースの座標をダウンロード中にGoogleマップが表示されない

Question

私は、データベースからgeocoordinatesをダウンロードして地図に表示すると同時に、ジオロケーション座標もアップロードする小さなアプリケーションがあります。私はコードを書いており、データは完全にうまくアップロードされ、ダウンロードされています。しかし地図自体は全く表示されません。ここに私のコードは次のとおりです：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en&key=MY-API-KEY" async defer></script> 

<script> 


if ("geolocation" in navigator) 
{ 
    request_location(); 

} 

// Requesting location from user 
function request_location() 
{ 
    // Will repeat the process in two minutes 
    setTimeout(request_location, 500 * 1000); 

    // Get location info from browser and pass it to updating function 
    navigator.geolocation.getCurrentPosition(update_location); 
} 

// Sending location to server via POST request 
function update_location(position) 
{ 
    // For simplicity of example we'll 
    // send POST AJAX request with jQuery 
    $.post("functions.php?action=update_geolocation", { latitude: position.coords.latitude, longitude: position.coords.longitude }); 



} 

function updatemap(lat_coordinates, long_coordinates) 
{ 


     var map = new google.maps.Map(document.getElementById('mapholder'), 
      { 
      zoom: 4, 
       center: {lat: lat_coordinates, lng: long_coordinates}, 
     }); 

     var marker = new google.maps.Marker({ 
      position: {lat: lat_coordinates, lng: long_coordinates}, 
       map: map, 
       title: 'Hello World!' 
        }); 

} 


setInterval(function update_map(){ 

     jQuery.ajax({ 
      url: "http://dev.radiumenterprises.co.uk/viitgo/provider/rest.php/geolocation", 
      type: "GET", 

      contentType: 'application/json; charset=utf-8', 
      success: function(resultData) { 

          console.log(resultData); 
          console.log(resultData.latitude); 
          console.log(resultData.longitude); 

          var lat_coordinates = parseFloat(resultData.latitude) 
          var long_coordinates = parseFloat(resultData.longitude) 

          updatemap(lat_coordinates, long_coordinates); 


      }, 
      error : function(jqXHR, textStatus, errorThrown) { 
      }, 

     }); 

    }, 3000); 

    </script> 
    <div style="height:100%; width:100%;"> 
    <div style="margin: 0;padding: 0;height: 100%;" id="mapholder"></div> 
    </div> 

どこが間違っているのか分かりませんが、唯一の問題はマップ自体が表示されていないことです。私は多くの解決策を試みましたが、それを引き起こしていることを理解できません。どんな提案も高く評価されます。前もって感謝します。

Answer 1

/rest.php/geolocationへのリクエストがタイムアウトしているため、updatemapが呼び出されないようです。

要求が機能している場合は、フォルダーのディメンションのディメンションを確認してください。高さが0のようです。

Answer 2

レンダリングマップのjsコードが正しいと思われます。

lat_coordinatesを確認すると、lng_coordinatesが適切です。

また、$（document）.ready（function（）{}）内にjsを書くか、jsがhtmlコードの後に​​レンダリングされていることを確認してください。

jsがレンダリングされるときに、DOM要素が利用できない場合があります。