Python 3 Flask Google Maps API Example to Embed Maps & Place Markers in Browser

Welcome folks today in this blog post we will be using the google maps api inside the flask application to embed maps and place markers in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below libraries using the below command as shown below

pip install flask

And after that you need to make an app.py file and copy paste the following code

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')

def index():

return render_template('index.html')

if __name__ == '__main__':

app.run(debug=True)

As you can see we are loading the index.html template file when user goes to the / route and then we are starting the flask app at the port number 5000. And now we need to embed the google map and place markers as shown below

templates/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Google Maps Example</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=##apikey##"></script>
    <script>
      var map;
      var markers = [];

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 37.7749, lng: -122.4194},
          zoom: 12
        });

        map.addListener('click', function(e) {
          placeMarker(e.latLng, map);
        });
      }

      function placeMarker(position, map) {
        var marker = new google.maps.Marker({
          position: position,
          map: map
        });
        markers.push(marker);
      }
    </script>
  </head>
  <body onload="initMap()">
    <div id="map" style="height: 500px; width: 100%;"></div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Google Maps Example</title>

var map;

var markers = [];

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {

center: {lat: 37.7749, lng: -122.4194},

zoom: 12

});

map.addListener('click', function(e) {

placeMarker(e.latLng, map);

});

}

function placeMarker(position, map) {

var marker = new google.maps.Marker({

position: position,

map: map

});

markers.push(marker);

}

</script>

</head>

</body>

</html>

As you can see we are executing the initMap() method where we are using the google maps api to embed the google maps and place markers. And in the above code you need to replace the api key from the dashboard of google cloud console and then we are showing the google map providing custom width and height and then we are displaying the google map using the latitude and longitude and then we are placing markers on mouse click and then we are using the Marker() method to place the marker on the map.