Build a PinFood application with Flask (part 3)
In this tutorial, we will learn how to add a Map to the template using the API Key that we created in the previous tutorial.
OK, let’s open the templates/home.html file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pin Food</title>
<script
type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=init">
</script>
<script type="text/javascript">
function init() {
var opt = {
center: new google.maps.LatLng(
-6.190059388922542,
106.7599655019272
),
zoom: 12
};
var map = new google.maps.Map(
document.getElementById("maps"),
opt
);
}
</script>
</head>
<body onload="init()">
<div class="container mt-4 mb-3">
<div class="row">
<div class="col-md-12">
<h1 class="display-4">Pin Food</h1>
<hr>
</div>
</div>
</div>
<div class="container mb-3">
<div class="row">
<div class="col-md-8">
<div id="maps" style="width: 70%; height: 500px"></div>
</div>
<div class="col-md-4">
<form action="/add" method="POST">
<label>Description</label>
<input type="text" class="form-control" name="description">
<button class="btn btn-primary" type="submit">
Submit
</button>
<a href="/clear" class="btn btn-outline-danger">
Clear
</a>
</form>
<div class="mt-3">
{% if data %}
{% for description in data %}
<p>{{ description }}</p>
{% endfor %}
{% endif %}
</div>
</div>
</div>
</div>
</body>
</html>So, in the YOUR_API_KEY section you can replace it with your API Key. If you forget, maybe map will not appear and make you confused then ask, why not appear? Hahaha.
callback=init, the JavaScript Map API requires a callback function in the url. init is a function that we create to initialize the map object we want to use.
When body is loaded, init will be called and a map object will be created. Because of this, we implement an onload event on the body such as onload = “init()”.
Here we set the initial location to be Longitude -6.190059388922542 and Latitude 106.7599655019272 by default and zoom the map by 15. In this section, you can change the Longitude and Latitude values as desired.
Let’s run a project (as we did in tutorial part 01) and then open http://localhost: 5000 in the browser. The result will look like the following image:
Don’t worry if the map looks dark. Maybe we haven’t activated billing yet. If your maps appear clearer, your Google account has activated billing. Since it’s a development mode, it doesn’t matter.
Source Code
We provide source code that you can clone at any time at the following link:
