Build a PinFood application with Flask (part 4)
In this tutorial we will display a map in the template, add a marker to the map when we click on it with JavaScript code. Also, we will also be guided on how to add other fields to the form we have created.
So, let’s open the templates/home.html file and change the JavaScript code to:
var map;
var marker;
function init() {
var opt = {
center: new google.maps.LatLng(
-6.190059388922542,
106.7599655019272
),
zoom: 12
};
map = new google.maps.Map(
document.getElementById("maps"),
opt
);
google.maps.event.addListener(map, 'click',
function(event) {
setMarker(event.latLng);
}
);
}
function setMarker(location) {
if (marker) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
}Run the project with python pinfood.py. Then, open the url http://localhost:5000 in a browser. If you click anywhere on the map, a red marker icon will appear.
As you can see. We use the setMarker function to mark the map at a specific location. This function is called inside the click event we create.
So, when you click on the map anywhere, the click event will run and call the setMarker function to put a red mark on the location you clicked on.
If you look at the body of the setMarker function, you’ll find the line marker.setPosition(location). setPosition is a provided method of the marker object to create a position with the given location. You can read information about this API at:
Customize Form
Still in the templates/home.html file and change the body to:
<body onload="init()">
<div class="container mt-4 mb-3">
...
</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">
<div class="card bg-light">
<div class="card-body">
<h4 class="card-title">Submit new Food Stall</h4>
<form action="/savefood" method="post">
<div class="form-group">
<label for="category">Category</label>
<select class="form-control"
name="category" id="category">
<option value="eggs">Eggs</option>
<option value="fish">Fish</option>
<option value="hotmeat">Hot Meat</option>
<option value="bread">Bread</option>
<option value="preserves">Preserves</option>
<option value="beverage">Beverage</option>
</select>
</div>
<div class="form-group">
<label for="date">Date</label>
<input class="form-control"
name="date" id="date" type="date">
</div>
<div class="form-group">
<label for="latitude">Latitude</label>
<input class="form-control"
name="latitude" id="latitude" type="text">
</div>
<div class="form-group">
<label for="longitude">Longitude</label>
<input class="form-control"
name="longitude" id="longitude" type="text">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control"
name="description" id="description">
</textarea>
</div>
<button class="btn btn-primary" type="submit">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>Refresh http://localhost:5000. The form will appear at the bottom:
For now, it doesn’t look attractive, and you don’t even want to see a design like this yourself. It is okay.
In the next post, we will add css with Bootstrap. And finally we will make this form work to store data (into the database) entered by the user.
For now, keep smiling and saying “my design is fine”. ha ha ha ha.
Source Code
We provide source code that you can clone at any time at the following link:
