Javascript 谷歌地图不显示在嵌套的div中

我试图将谷歌地图插入嵌套的div中。我从网上找到的一个示例中复制了一些通用代码，以确认我可以让它工作。我将代码粘贴到index.html的body元素中，效果很好。然后我将相同的代码粘贴到我的app.component.html中，地图没有显示出来。我确保使用以像素为单位的高度和宽度大小，因此它不会对贴图容器div使用任何相对大小。此外，当我检查包含贴图的元素时，它会在屏幕上高亮显示一个大的空白正方形，其中贴图应与我指定的大小相同。我还注意到，在dev工具中查看map元素时，它没有像已知良好的map div那样生成任何额外的嵌套div

我正在使用的代码段：

<div style="height:100%; width: 100%">
    <h1>My First Google Map</h1>
    <div id="googleMap2" style="height:400px; width: 400px">insert map</div>
    <script>
        function initMap() {
            var mapProp2= {
                center:new google.maps.LatLng(-33.8478796,150.791894), zoom:17,
            };
            var map=new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
</div>

我的第一张谷歌地图
插入地图
函数initMap（）{
变量mapProp2={
中心：新google.maps.LatLng（-33.8478796150.791894），缩放：17，
};
var map=new google.maps.map（document.getElementById（“googleMap2”）、mapProp2）；
}

编辑：我使用的是api密钥，我只插入了

api\u密钥

作为占位符

此图显示了它在我的浏览器中的外观

---

您需要为正在使用的域注册和定义API密钥，因此：

https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap

应该看起来像：

https://maps.googleapis.com/maps/api/js?key=AzOaSyAI_FJ4STEHLG2SlqU8QCilw_Y9_11W8qc&callback=initMap

---

需要注意的是，GoogleJSAPI不再是免费的；因此，除非您需要使用多个标记等自定义地图，否则最好在使用google maps中的共享地图功能时使用iframe嵌入功能。

如果您遇到以下错误：InvalidKeyMapError，那么如果已经有Api密钥，则需要获取Api密钥

启用Api以执行此操作

转到API管理器

点击概览

搜索谷歌地图JavaScript API（在谷歌地图API下）。点击那个

您将在那里找到启用按钮。单击以启用API

---

希望这将解决启用API的问题，将其添加到应用程序内部的index.html中

和内部app.component.html

import { Component, OnInit } from '@angular/core';
declare var google:any;
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

ngOnInit(){
this.getMap();
}

getMap() {

  let mapProp = {
    center: new google.maps.LatLng(23.4866, 80.1066),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    draggable: false
  };
  new google.maps.Map(document.getElementById('gmap'), mapProp);

}
}

---

我在用一个，我只是用那个文本作为占位符。当我把这个片段放到index.html中时，我能够让地图显示出来。但是当把它放在app.component.html中时，它并没有显示我有一个api密钥，它可以工作。如果我将代码放在index.html中，而不是我的app.component.htmlPlease中，地图也会出现。请提供一个允许重现问题的映射。您上面发布的代码工作正常。此外，如果您在javascript控制台中收到错误/警告，请编辑您的问题并将其包括在内。也许你可以看看。天哪，非常感谢你。问题是我在html中使用了

getMap（）

作为脚本，而不是在应用程序组件初始化时调用它。现在好像它工作得很好！我试图提高投票率，但我的代表率太低了。很抱歉