谷歌地图没有出现在烧瓶应用程序上

Question

我制作了一个烧瓶应用程序，应该在技术上按照tutorial加载谷歌地图。

但令我惊讶的是，一切都在本地和hosted on heroku上运行，并且没有错误，但地图不会加载。

<div id="map"></div>

            <script type="text/javascript">
                    var map;
                    function initMap() {
                        map = new google.maps.Map(document.getElementById('map'), {
                            center: {lat: {{lat}}, lng: {{lng}}},
                            zoom: 16
                          });
                        console.log("map function");
                        console.log(map);
                    }
            </script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{key}}&callback=initMap" async defer></script>

请看一下javascript控制台输出，你会看到两个打印，第一个是地图功能，第二个是地图对象创建的纬度和经度传递给initMap函数。这意味着地图对象已创建但未使用地图ID更新div！

Google网页上的Error Code listed都没有发生。

Answer 1

大多数情况下，这与API密钥有关。确保以正确的方式创建了一个并且已启用并正在运行。希望我帮忙。