Google Map JS 未显示（尝试了其他答案）

Question

我正在开发一个将使用 Google 地图/地点 API 的网站。我已验证我的 API 密钥工作正常，所以这不是问题。我什至无法显示地图 - 这是我的问题。
我把例子照搬过来了，还是不行
Here's my code 在要点中，因为它是几个文件。它应该是可运行的，这就是所有内容。

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

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

WebStorm 在所有 google.maps.x 类下划线并表示它们是 "unresolved variables or types"。这可能是我的问题，但我不知道是什么原因造成的，也不知道如何解决。需要明确的是，我已经浏览了我在 Stack Overflow 上找到的所有与此相关的文章，但没有找到解决方案。

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

Answer 1

您正在尝试运行 main.js Google Maps SDK 加载之前。将其移到 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
}

这对我有用。

Google Map JS 未显示（尝试了其他答案）

Google Map JS Not Showing (tried other answers)

html

javascript

google-maps

web

google-places-api