I'm a newbie writing a Flask web app that displays in a Google Map a series of locations stored in a SQLite database. In order to do this I'm trying to use the Flask-GoogleMaps extension (https://github.com/flask-extensions/Flask-GoogleMaps), but even when I only try the example code given in the documentation the map won't display in the page. The server returns a 403 error:
GET http://maps.googleapis.com/maps/api/mapsjs/gen_204?csp_test=true 403 (Forbidden).
I know the Google Maps JS API key given is correct since the map displayed just fine when I included the raw code as explained in the Google Maps API documentation.
This is the app that I'm running:
from flask import Flask, render_template
from flask_googlemaps import GoogleMaps, Map
app = Flask(__name__)
GoogleMaps(app, key="MY_KEY")
@app.route("/")
def mapview():
# creating a map in the view
mymap = Map(
identifier="view-side",
lat=37.4419,
lng=-122.1419,
markers=[(37.4419, -122.1419)]
)
return render_template('example.html', mymap=mymap)
if __name__ == "__main__":
app.run(debug=True)
This is the rendered HTML:
<!DOCTYPE html>
<html>
<head>
{{mymap.js}}
</head>
<body>
<h1>Flask Google Maps Example</h1>
{{mymap.html}}
</body>
</html>
What could be the problem? Thank you very much in advance!