Flask dynamic google maps markers (python, postgres, psycopg2)
I am creating a Flask application that fetches data from postgresql database using psycopg2. For the user, the database has latitude and longitude on each row. I want to dynamically display users who are active on my map using markers with this lat / lng information.
Right now, I can get the user's active coordinates using the following in app.py:
def getUserLocation(conn, cur):
cur.execute("""SELECT latitude, longitude FROM user_list WHERE timestamps >
(current_timestamp - make_interval(mins := %s))""", [setTime])
for latitude, longitude in cur.fetchall():
return latitude, longitude
This return value is then stored as locations .
myConnection = psycopg2.connect(host=hostname, user=username,
password=password, dbname=database)
cur = myConnection.cursor()
locations = getUserLocation (myConnection, cur)
It then morphed into Jinja like this:
@app.route("/")
def mapview():
return render_template('index.html', locations=locations)
This is what the add marks add function looks like right now where I try to call those values and it doesn't work.
function addMarkers() {
{% for location in locations %}
var point = {lat: {{ location.lat }}, lng: {{ location.lng }}};
var marker = new google.maps.Marker({
position: point,
map: map,
});
{% endfor %}
}
How can I render these points dynamically on the map?
+3
source to share
1 answer
Just go through latitude and longitude and process the points on the client side like this:
<div id="map" style="width: 100%; height: 400px"></div>
<script>
$(document).ready(function(){
function initMap() {
var latlng = { lat: 37.09024, lng: -95.712891 }; // THIS IS CENTER OF THE MAP
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: latlng,
scrollwheel: false,
disableDoubleClickZoom: true,
});
google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);
function addMarkers() {
var point = { lat: {{ locations.latitude }}, lng: {{ locations.longitude }} };
var marker = new google.maps.Marker({
position: point,
map: map,
title: '!',
url: '',
});
marker['infowindow'] = new google.maps.InfoWindow({
content: '<div id="content" style="text-align: center">{{ point.info }}</div>'
}); // info of the point
google.maps.event.addListener(marker, 'click', function() {
//window.location.href = this.url;
this['infowindow'].open(map, this);
});
google.maps.event.addListener(marker, 'mouseover', function() {
//this['infowindow'].open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
//this['infowindow'].close(map, this);
});
}
}
});
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR_CODE&callback=initMap" async defer></script>
+1
source to share