Google Maps Javascript API未正确加载

我正在尝试将Google Maps API加载到一个网页中，页面底部带有

标记，上面引用了#map元素

获取错误警报：“此页面无法显示Google Maps元素。提供的Google API密钥无效或此网站无权使用。错误代码：InvalidKeyOrUnauthorizedURLMapError”

我的API密钥绝对正确；我已经检查过好几次了

我已选择接受以下推荐人的请求
*.mywebsite.com/*
*.mywebsite.com*
www.mywebsite.com/*
www.mywebsite.com/test//这是我试图加载地图的url

我尝试过不使用API键引用，也不使用Init回调和映射间歇性加载。有时它会加载（大约20%的时间），其他时候它不会加载，我得到以下控制台日志-ReferenceError：google没有定义

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
<script src="/js/map.js"></script>

---

您将GMap脚本称为async defer，因此不确定该脚本是否会在map.js之前下载并执行。你的map.js脚本调用GMAPAPI

是否可以先在没有async defer属性的情况下进行测试。如果可以，只需在initMap函数中移动所有初始化代码，它应该可以工作：

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'），mapOptions）；
var marker=new google.maps.marker({
职位：mapLatLng，
地图：地图，
标题：“你好，世界！”，
图标：地图标记
});
//将样式化映射与MapTypeId关联，并将其设置为显示。
map.mapTypes.set（'map\u style'，styledMap）；
setMapTypeId（'map_style'）；
var styledMap=new google.maps.StyledMapType（mapStyle，{name:“Styled Map”}）；
变量映射选项={
中心：mapLatLng，
缩放：10，
滚轮：错误，
导航控制：错误，
mapTypeControl:false，
scaleControl:false，
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，'map_style']
}
};
}

这似乎适用于不使用api密钥的情况，谢谢。但在控制台中似乎得到了“TypeError:window.initMap不是函数”。如果在作用域之外声明

initMap

，它将在

window

对象中创建。尝试在控制台中执行

window.initMap

。如果未定义，则您的

ìnitMap

声明可能已确定范围。在这种情况下，移动其声明或使用

window.initMap=function（）{…

。如果此答案解决了您的问题，您可以将其标记为已回答吗？

var map;
var mapLatLng = {lat: 13.778182, lng: -0.23676};
var mapStyle = [maps style options] // https://snazzymaps.com/style/38/shades-of-grey
var mapMarker = '/img/marker.png';

function initMap() {

  var styledMap = new google.maps.StyledMapType(mapStyle,
  {name: "Styled Map"});

  var mapOptions = {
    center: mapLatLng,
    zoom: 10,
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  }
};

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

var marker = new google.maps.Marker({
  position: mapLatLng,
  map: map,
  title: 'Hello World!',
  icon: mapMarker
});

//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

}

google.maps.event.addDomListener(window, 'load', initMap);