谷歌地图显示灰色框而不是谷歌地图使用javascript

问题描述：

这里我试图用javascript来显示我的地图，但它显示了一个灰色框而不是地图，并且它没有在控制台中显示任何错误。谷歌地图显示灰色框而不是谷歌地图使用javascript

这里是我的地图的图像：

请帮助解决这个问题。提前致谢。

这里是我的代码：

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

 
function init() { 
 
    var mapOptions = { 
 
    zoom: 11, 
 
    center: new google.maps.LatLng(40.767089, -73.969458), 
 
    scrollwheel: false, 
 
    disableDefaultUI: true, 
 
    styles: [{ 
 
     stylers: [{ 
 
     hue: '#2c3e50' 
 
     }, { 
 
     saturation: 250 
 
     }] 
 
    }, { 
 
     featureType: 'road', 
 
     elementType: 'geometry', 
 
     stylers: [{ 
 
     lightness: 50 
 
     }, { 
 
     visibility: 'simplified' 
 
     }] 
 
    }, { 
 
     featureType: 'road', 
 
     elementType: 'labels', 
 
     stylers: [{ 
 
     visibility: 'off' 
 
     }] 
 
    }] 
 
    }; 
 

 
    var mapElement = document.getElementById('map_canvas'); 
 

 
    var map = new google.maps.Map(mapElement, mapOptions); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: map.getCenter(), 
 
    map: map, 
 
    title: 'Click to zoom' 
 
    }); 
 
}

html { 
 
    height: 100% 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
#map_canvas { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
} 
 
#map_canvas * { 
 
    overflow: visible; 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MyKeyhere"></script> 
 
<div id="map_canvas" style="width: 600px; height: 600px; position: relative;"> 
 
</div>

我测试了你的代码，它正在工作。你用什么类型的钥匙？选中此文档（https://developers.google.com/maps/documentation/javascript/get-api-key），如果您要使用Google Maps JavaScript API，则必须使用**浏览器键**（a API键类型） –

当您查看浏览器控制台中的网络活动时，什么是磁贴请求的状态码？请求类似https：//www.google.com/maps/vt？.... – xomena

答

不知道这会有所帮助：

我使用我的网站上设置一个mapTypeIds不同势的MapOptions。

var mapOptions = { 
     zoom: 19, 
     center: new google.maps.LatLng(51.7734896,4.6764931), 
     mapTypeControlOptions: { 
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
     } 
    };

但它不能帮助制作可能映射样式 –

也许看看我的网站后面的代码有帮助吗？我在google.maps上使用自定义主题样式：http://www.edwardpieper.nl/?c=contact –

谷歌地图显示灰色框而不是谷歌地图使用javascript

相关推荐