Question

我正在尝试在网页中加载Google Maps API，主体底部带有<script>标记，上面引用了#map元素。

获取错误提示：＆＃34;此页面无法显示Google地图元素。提供的Google API密钥无效，或者此网站无权使用它。错误代码：InvalidKeyOrUnauthorizedURLMapError＆＃34;

我的API KEY绝对正确;我已经多次检查过了。

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

我尝试过没有API Key Reference且没有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>

我的map.js文件包含地图配置

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);

Answer 1

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

如果没有 async defer 属性，您可以先测试吗？如果没关系，只需在initMap函数中移动所有初始化代码，它应该可以工作：

function initMap() {
   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');
   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']
      }
   };
}

Google Maps Javascript API无法正确加载

1 个答案: