2016-04-22 16 views
0

しばらくお読みになった後、私はJavascript用Google Maps APIを使い始めました。私は自分のウェブサイト上にキーを持っていましたが、私はマップを作成するためのさまざまな方法を試しましたが、今は以前の "場所"でマップを作成したいので、まずGeocoder.geocode()を使用して、それはokeyを働いていた。Googleが定義されていません(APIマップエラー)

私はこれらのマップでオーバーレイ(マーカー)を使用することにしましたが、わかりません。Googleに未知のエラーが表示されています:Googleは定義されていません。

は、私はそれについて少し読んで、私は時間のほとんどは非同期問題について知っているけど、私はまだそれを修正する方法がわからない、ここでのコードは次のようになりますため

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body { height: 100%; margin: 0; padding: 0; } 
     #map { height: 100%; } 
    </style> 

    </head> 


    <body> 

    <div id="map"></div> 

    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ&callback=initMap"></script> 

    <script type="text/javascript"> 

     var sLocation = "Castillejos 265 Barcelona"; 
     var sLocationToSearch =sLocation.split(' ').join('+'); 

     $.ajax({ 
      type: 'GET', 
      url: 'https://maps.googleapis.com/maps/api/geocode/json?address='+ sLocationToSearch +'&key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ', 

      success: function(res){ 
       // ParseFloat the <latitud> and <longitud> 
       //var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon)); 

       initMap(res.results[0].geometry.location); 
      }, 
      error: function(error){ 
       console.log(error); 
      } 
     }); 

     function initMap(oLatlng){ 
      var map = new google.maps.Map(document.getElementById('map'), { 
       center: oLatlng, 
       zoom: 15 
      }); 
     } 

    </script> 
    </body> 
</html> 

おかげで多くのことをあなたの助けがページの後

+0

誰かがこのような問題を持っているすべての時間を使用することによってロードされ、それがALWですスクリプトタグの 'async'、' defer'、 '&callback = initMap'のためにです。このコードはどこで見つかりましたか? – cdm

答えて

0

コールJavaScriptはwindow.onload

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
     html, body 
     { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     #map 
     { 
      height: 100%; 
     } 
    </style> 

</head> 


<body> 

<div id="map"></div> 

<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ&callback=initMap"></script> 

<script type="text/javascript"> 
    window.onload = function() 
    { 
     var sLocation = "Castillejos 265 Barcelona"; 
     var sLocationToSearch = sLocation.split(' ').join('+'); 

     $.ajax({ 
      type : 'GET', 
      url : 'https://maps.googleapis.com/maps/api/geocode/json?address=' + sLocationToSearch + '&key=AIzaSyAeaWLxSHFEdwWEVVYajslt7R9eP0ZpLXQ', 

      success : function(res) 
      { 
       // ParseFloat the <latitud> and <longitud> 
       //var myLatlng = new google.maps.LatLng(parseFloat(trader.geo.lat),parseFloat(trader.geo.lon)); 

       initMap(res.results[0].geometry.location); 
      }, 
      error : function(error) 
      { 
       console.log(error); 
      } 
     }); 

     function initMap(oLatlng) 
     { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       center : oLatlng, 
       zoom : 15 
      }); 
     } 
    } 
</script> 
</body> 
</html> 
+0

感謝しました!私はまだJS、本当にありがとう男に問題があります –

関連する問題