Javascript 谷歌地图在web应用程序中显示空白页

我对API非常陌生，我一直试图通过获取我的位置并将其传递给新的google.maps.Map来运行它，但它没有显示地图。我想我犯了一些错误，但是javascript中的控制台没有显示任何错误。请看一下我的代码，看看我应该怎么做。先谢谢你

var map;

function displayLocation(position){
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var pLocation = document.getElementById("location");
    pLocation.innerHTML = latitude + ", " + longitude;

    showMap(position.coords);
}

function showMap (coords){
    var googleLatLong = {lat: coords.latitude, lng: coords.longitude};
    console.log(googleLatLong);
    var mapOptions = {
        zoom: 11,
        center: googleLatLong,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var mapDiv = document.getElementById("map");
    map = new google.maps.Map(mapDiv, mapOptions);
    console.log(map);
}


function displayError(error){
    var errors = ["Unknow error", "Permission denied by user", "Position not available", "Timeout error"];
    var message = errors[error.code];
    console.warn("Error in getting your location: " + message, error.message);
}

window.onload = function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(displayLocation, displayError);
    } else {
        alert("Error Occor!");
    }
}

身体{
背景色：#fafafa；
字体系列：Helvetica、Arial、无衬线字体；
利润率：20px；
}
分区图{
宽度：600px；
高度：400px；
}
寻找附近的地方

加载。。。

更换我的钥匙

src="https://maps.googleapis.com/maps/api/js?key=MyKey">

---

对于它的关键谷歌api

你好！实际上，我已经生成了密钥并将其放在那里，但是仍然不起作用。变量（coords.latitude，coords.longitude）是否有数据？