Google Maps not showing in Flask app as per tutorial

Question

I have made a Flask app that should technically load Google Map as per their tutorial.

But to my surprise, everything works locally and on hosted on Heroku and no error comes but maps don't load.

<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>

In the JavaScript console output, there are two prints: the first one says map function, second one is map object created of latitude and longitude passed to initMap function. This means the map object got created but did not updated div with map id!

None of the error codes listed on the Google page are occurring.

Answer 1

Most of the times this has something to do with the API Key. Make sure you created one the right way and that it is enabled and running. Hope I helped.

Answer 2

I had the exact same problem. I followed the tutorial step by step but it didn't work.

Chances are, you've installed flask_googlemaps using pip and chances are, pip didn't update the path to the latest version of flask_googlemaps.

Here's how to fix the problem:

1. pip uninstall flask_googlemaps
2. Download the package from here (in case the link breaks, its in their github page, realse tag 0.4.1.1)
3. pip3 install path_to_the_package_you_just_downloaded
4. run your app, it should be working now!

This is the solution that worked for me.