Googleプレイスライブラリに空白のページがある

私が開いたとき、ページは空白でした。代わりにキー私は私のキーをコピーしたが、それでも動作しません。誰かが間違っていることを知っていますか？私はhtmlなどを追加しました。私が開いたときに毎回なぜページが空白であるのかわかりません。エラーはありません。Googleプレイスライブラリに空白のページがある

<title>Place searches</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places"> 

    var map; 
    var service; 
    var infowindow; 

    function initialize() { 
     var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316); 

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

     var request = { 
      location: pyrmont, 
      radius: '500', 
      type: ['restaurant'] 
     }; 

     service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 
    } 

    function callback(results, status) { 
     if (status == google.maps.places.PlacesServiceStatus.OK) { 
      for (var i = 0; i < results.length; i++) { 
       var place = results[i]; 
       createMarker(results[i]); 
      } 
     } 
    } 
</script> 
<style> 

    #map { 
     height: 100%; 
    } 

    html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
</style> 
</head> 
<body> 
<div id="map"></div> 
<script src="https://maps.googleapis.com/maps/api/js?key=key&libraries=places&callback=initMap" async defer>

出典

2017-09-30 J.J

あなたのコードにはいくつかの問題があります：あなたは二度マップのJavaScriptのAPIの呼び出しが含まれるGoogleマップのJavaScript API

をロード<script>タグを閉じないでください

は、
マップを初期化するコードに<script>タグがありません。
あなたはコールバック関数の名前としてinitMapを使用しますが、あなたのコード内の関数の名前はinitialize
機能createMarkerですが、私はこれらの問題を解決した場合はマップが正しくロードされている

が定義されていません。固定されたサンプルを見てください：

var map; 
 
var service; 
 
var infowindow; 
 

 
function initialize() { 
 
    var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316); 
 

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

 
    var request = { 
 
     location: pyrmont, 
 
     radius: '500', 
 
     type: ['restaurant'] 
 
    }; 
 

 
    service = new google.maps.places.PlacesService(map); 
 
    service.nearbySearch(request, callback); 
 
} 
 

 
function callback(results, status) { 
 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
 
     for (var i = 0; i < results.length; i++) { 
 
      var place = results[i]; 
 
      //createMarker(results[i]); 
 
     } 
 
    } 
 
}

#map { 
 
    height: 100%; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initialize&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" async defer></script>

またjsbin上の例を見ることができます：http://jsbin.com/cutomaxoxi/edit?html,output

私はこれが役に立てば幸い！

出典

2017-09-30 20:31:04 xomena

Googleプレイスライブラリに空白のページがある

答えて

関連する問題