Google지도를로드 할 수없는 이유는 무엇입니까?

-2

나는 프로그래밍에 익숙하지 않고 배우기 위해 노력하고있다. projecti 들어 구글 맵을로드하고 싶었지만 시간 이후에 노력하고 있지만 캔트는 구글 맵을로드하는 것 그리고 아직 콘솔에 자바 스크립트 오류가 표시되지 않습니다. 아무도 내가하고있는 실수로 나를 가리킬 수 있습니까Google지도를로드 할 수없는 이유는 무엇입니까?

<!DOCTYPE html> 
<html> 
<head> 
    <title>BART</title> 
    <style> 
    body 
    { 
     height: 100%; 
    } 
    #map 
    { 
     height: 80%; 
     width: 60%; 
    } 
    </style> 
    <script src = "https://maps.googleapis.com/maps/api/js?key=mykey</script> 
    <script> 
     var map ; 


     //function to initialize map 
     var initialize = function() 
      { 
      var mapOptions = { 
       center :{lat: 37.775362, lng: -122.417564}, 
       zoom : 12, 
       mapTypeId : google.maps.MapTypeId.ROADMAP 
       }; 

      map = new google.maps.Map(document.getElementById('map'), 
        mapOptions); 
      } 


      window.onload = initialize; 
    </script> 

</head> 
<body> 
    <div id ="map"> 
    </div> 
</body> 
</html>

출처

2017-05-23 Furrukh Jamal

당신은

#map { 
    height: 400px; 
    width: 400px; 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>BART</title> 
 
    <style> 
 
    body { 
 
     height: 100%; 
 
    } 
 
    
 
    #map { 
 
     height: 400px; 
 
     width: 400px; 
 
    } 
 
    </style> 
 
    <script src="https://maps.googleapis.com/maps/api/js?"></script> 
 
    <script> 
 
    var map; 
 

 

 
    //function to initialize map 
 
    var initialize = function() { 
 
     var mapOptions = { 
 
     center: { 
 
      lat: 37.775362, 
 
      lng: -122.417564 
 
     }, 
 
     zoom: 12, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 

 
     map = new google.maps.Map(document.getElementById('map'), 
 
     mapOptions); 
 
    } 
 

 

 
    window.onload = initialize; 
 
    </script> 
 

 
</head> 
 

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

 
</html>

출처

2017-05-23 11:50:23

그래도 작동하지만 여전히 기울어 짐을 이해할 수 없습니다. 높이와 너비를 백분율로 표시했을 때 왜 작동하지 않는지 이해할 수 있습니다. –

CSS의 .html, body, # map {height : 80 %; 너비 : 60 %;}'그것은 –

Google지도 설명서에 제공된 코드를 사용하십시오.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </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=YOUR_API_KEY&callback=initMap" 
    async defer></script> 
    </body> 
</html>

출처

2017-05-23 11:29:21 Ved

내가 기술적으로 같은 일을하지 나처럼하지만 다른 방법으로 CSS를 추가해야합니다. 지도가 내 코드와도 같을 까? –

Google지도를로드 할 수없는 이유는 무엇입니까?

답변

관련 문제