Google Map JS Not Showing（尝试了其他答案）

Question

我正在开发一个将使用 Google Maps / Places API 的网站。我已经验证我的 API 密钥工作正常，所以这不是问题。我什至无法显示地图 - 这是我的问题。
我已经完全复制了该示例，但它仍然无法正常工作。
Here's my code 概括地说，因为它是几个文件。它应该是可运行的，这就是所有内容。

到目前为止我所做的尝试：
- 将其全部放入文档就绪函数 (jQuery)。
- 将其从 getCurrentPosition 函数中取出，使其位于 main.js 文件中。
- 在我的 HTML 文件中移动脚本链接的位置，任何位置都没有改变。
- 如果我 console.log() lat 和 long 变量，它们会打印我的位置。但是当我将它们输入 Chrome 开发工具控制台时，它们是“未定义的”。但是，我的“地图”变量将地图 div 打印到控制台。
- 使用静态坐标，而不是从导航器 HTML5 元素收集的坐标。
- 使用像素、百分比和 vh/vw 设置地图 div 的高度和宽度。它占据了屏幕 - 我知道是因为我给了它一个正在显示的背景颜色。
- 在我的 API 加载末尾添加了参数：&callback=initialize&libraries=places

这是我第一次使用地图，所以我完全迷路了。我跟着Google's example 到了一个发球台，但仍然一无所获。

WebStorm 强调所有 google.maps.x 类，并说它们是“未解决的变量或类型”。这可能是我的问题，但我不知道是什么原因造成的或如何解决它。需要明确的是，我已经浏览了我在 Stack Overflow 上找到的与此相关的所有文章，但没有找到解决方案。

更新：
- 我刚刚尝试从谷歌完全复制和粘贴this example，因为它出现（当然是我的API密钥），但它仍然没有工作。我把它放在我的 HTML 中的脚本标签中。它起作用的唯一方法是如果我删除 initMap() 函数 - 不是它的内容，只是将它声明为一个函数。那么为什么作用域在这里表现得如此奇怪呢？它将函数内部的所有内容（在我的 HTML 中的脚本标记中）都视为未定义，只是因为它在函数中......在最高范围级别。

Answer 1

您正在尝试在 Google Maps SDK 加载之前运行 main.js。将其移至main.js' inindex.html`上方：

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

然后，删除initialize 函数：

if ("geolocation" in navigator) {
console.log("Geolocation is enabled.");
navigator.geolocation.getCurrentPosition(function (position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    var map;
    var service;
    var infoWindow;

    console.log("lat: " + lat);

    //Initialize Google Map. Starts at user's location.

        var userLocation = new google.maps.LatLng(lat, long);

        map = new google.maps.Map(document.getElementById('map'), {
            center: userLocation,
            zoom: 15
        });

        var request = {
            location: userLocation,
            radius: '500',
            types: ['store']
        };

        service = new google.maps.places.PlaceService(map);
        service.nearbySearch(request, callback);


    //Callback function for nearbySearch
    function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                var place = results[i];
                createMarker(results[i]);
            }
        }
    }
});
} else {
console.log("Geolocation is disabled.");
//Inform user why we use location
//Allow user to enter location manually
} 

这对我有用。