Flaskの動的Googleマップマーカー（python、postgres、psycopg2）

Question

私はpsycopg2を使用してpostgresqlデータベースからデータをプルするFlaskアプリケーションを作成しています。各行のユーザーに対して、データベースには緯度と経度の情報があります。この緯度/経度情報のマーカーを使用して、アクティブなユーザーをマップに動的にプロットしたいと思います。

今、私は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 

は、この戻り値は、場所として保存されます。

myConnection = psycopg2.connect(host=hostname, user=username, 
password=password, dbname=database) 
cur = myConnection.cursor()  
locations = getUserLocation (myConnection, cur) 

それは次のように神社にレンダリングの当時：私はこれらの値を呼び出そうと、それが動作しない場合

@app.route("/") 
def mapview(): 
    return render_template('index.html', locations=locations) 

これは、マーカー機能を追加し、私のものですが、今のように見えます。

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 %} 
} 

これらのポイントを地図上でどのように動的にレンダリングできますか？

Answer 1

ただ、緯度と経度を通過しており、このようなクライアント側のポイントを処理：

<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>