Javascript 谷歌地图代码在我的文件上不起作用，但在其他地方起作用_Javascript_Html_Google Maps

Javascript 谷歌地图代码在我的文件上不起作用，但在其他地方起作用

javascript html google-maps

Javascript 谷歌地图代码在我的文件上不起作用，但在其他地方起作用,javascript,html,google-maps,Javascript,Html,Google Maps,当我将代码放入另一个没有任何其他内容的html文档中时，下面的代码实际工作并显示了具有正确位置和标记的地图（id=“map”的div，带有javascript函数和API的脚本）现在的问题是，出于某种原因，当我在这个HTML中使用与GoogleMaps完全相同的代码和工作API时，地图根本不会显示出来这是我的密码： <html lang="en" dir="ltr"> <head> <title>-</title> <

当我将代码放入另一个没有任何其他内容的html文档中时，下面的代码实际工作并显示了具有正确位置和标记的地图（id=“map”的div，带有javascript函数和API的脚本）

现在的问题是，出于某种原因，当我在这个HTML中使用与GoogleMaps完全相同的代码和工作API时，地图根本不会显示出来

这是我的密码：

<html lang="en" dir="ltr">
  <head>
    <title>-</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        width: 100%;  /* The width is the width of the web page */
        max-width:450px;
       }
    </style>
    <link rel="stylesheet" type="text/css" href="../main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container">
    ...

      <div class="row">
        ...

        <div class="col-sm-6">
          <div id="map"></div>
        </div>
      </div>

      <script>
        // Initialize and add the map
        function initMap() {
        // The location of company
        var freshlocation = {lat: 1.337344, lng: 103.912835};
        // The map, centered at company
        var map = new google.maps.Map(
            document.getElementById('map'), {zoom: 7, center: freshlocation});
        // The marker, positioned at company
        var marker = new google.maps.Marker({position: freshlocation, map: map});
        }
      </script>
      <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap">
      </script>
...

    </div>
  </body>
</html>


-
/*设置包含映射的div元素的大小*/
#地图{
宽度：100%；/*宽度是网页的宽度*/
最大宽度：450像素；
}
...
...
//初始化并添加映射
函数initMap（）{
//公司所在地
var freshlocation={lat:1.337344，lng:103.912835}；
//以公司为中心的地图
var map=new google.maps.map(
getElementById（'map'），{zoom:7，center:freshlocation}）；
//位于公司的标记
var marker=new google.maps.marker（{position:freshlocation，map:map}）；
}
...

我想知道它是否与head中的一些代码有关，比如导入字体或引导，或者maps div的位置，比如将map放入容器或row类。任何帮助都将不胜感激。

好的，我已经设法找到了答案。设置map div的高度解决了这个问题

可能重复的