根据教程，谷歌地图未在 Flask 应用程序中显示答案

【问题标题】：Google Maps not showing in Flask app as per tutorial根据教程，谷歌地图未在 Flask 应用程序中显示
【发布时间】：2017-08-08 16:49:51
【问题描述】：

我已经制作了一个 Flask 应用程序，它在技术上应该按照他们的tutorial 加载 Google 地图。

但令我惊讶的是，一切都在本地和 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 codes listed 均未出现。

【问题讨论】：

标签： google-maps flask google-geocoding-api

【解决方案1】：

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

【讨论】：

我在信用凭证下从谷歌控制台获得了密钥，（我相信所有 API 密钥都适用于不同类型的谷歌应用程序）并且我将它限制为我托管的同一个域名。
API 密钥应符合您的目的。例如，如果您想在 Android 设备和网站上添加谷歌地图，您必须为每个设备创建不同的密钥。其次，尽量不要限制你的密钥。创建一个没有任何限制的 google maps javascript 密钥并在您的站点中使用它。
您好@Apostolis，我认为这与API Key 无关，因为在会引发异常的控制台中，我进行了实验并发现了。不过，我在开篇文章中添加了更多信息。

【解决方案2】：

我遇到了完全相同的问题。我一步一步按照教程进行操作，但没有成功。

很有可能，您已经使用 pip 安装了 flask_googlemaps，而且 pip 没有将路径更新到最新版本的 flask_googlemaps。

解决问题的方法如下：

pip 卸载 flask_googlemaps
从here下载包（如果链接断开，在他们的github页面，realse标签0.4.1.1）
pip3 install path_to_the_package_you_just_downloaded
运行您的应用，它现在应该可以运行了！

这是对我有用的解决方案。

【讨论】：