Google지도 JS 예제가 표시되지 않습니다.

<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
     var map; 
     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      zoom: 8 
     }); 
     } 
    </script> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlcVddNcJrrifavMfBBHkGhmh8ajmskbU&callback=initMap" 
    async defer></script> 
    </body>

이 튜토리얼에서지도를 가져 와서 Rails 4 앱에 표시하려고합니다. https://developers.google.com/maps/documentation/javascript/examples/map-simple Google지도 JS 예제가 표시되지 않습니다.

API 키를 사용하면 콘솔에 메시지를 표시하지 않고 완전히 사라지는 것처럼 보입니다.

그러나 키 없이는 enter image description here

출처

2016-07-29 steve chen

그것의 작동 코드를 매핑도 폭을 추가 나를 위해이 작품을 보여줍니다 이 링크를 참조하십시오. http://stackoverflow.com/questions/23118546/google-maps-v3-api-key-wont-work-for-local-testing/23125207#23125207 – mean

<!DOCTYPE html> 
    <html> 
     <head> 
     <title>Simple Map</title> 
     <meta name="viewport" content="initial-scale=1.0"> 
     <meta charset="utf-8"> 
     <style> 
      html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
      } 
      #map { 
      height: 100%; 
      } 
     </style> 
     </head> 
     <body> 
     <div id="map"></div> 
     <script> 
      var map; 
      function initMap() { 
      map = new google.maps.Map(document.getElementById('map'), { 
       center: {lat: -34.397, lng: 150.644}, 
       zoom: 8 
      }); 
      } 
     </script> 
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlcVddNcJrrifavMfBBHkGhmh8ajmskbU&callback=initMap" 
     async defer></script> 
    </body> 
</html>

어쨌든 그 완전히 당신이 할 수있는 작업 브로 용기를

 #map { 
     height: 100%; 
     width: 100%; 
     }

출처

2016-07-29 15:54:18 scaisEdge

지도 컨테이너 너비를 맞추지 않고 일하고있다 – mean

@ 카발 리 예. 너는 너비를 지정하고있다. 내 제안은 좋은거야. – scaisEdge

Google지도 JS 예제가 표시되지 않습니다.

답변

관련 문제