title: Load to google maps the markers in current viewport flask query url
body: <p>I am building a google maps web app that contains thousands of markers. When dealing with a high number of markers it is important to only load the markers in the current viewport to not slow down the app. I want to make an AJAX call everytime the bounds changes and load the markers in the viewport. To determine what the viewport is I have to pass the northeast and southwest latitude and longitude coordinates as URL parameters to my backend, then I  have to query the SQL for the markers that are within the coordinates and place them in the map.</p>
  
  <p>The issue is that I don't know how to send the coordinates from the front-end to the back-end without having to click a "submit" button. </p>
  
  <p>This Is what I have so far:</p>
  
  <p>Front-end:</p>
  
  <pre><code>      &lt;div id="info" action="{{ url_for('data') }}"&gt;
          &lt;p&gt;NorthEast=&lt;/p&gt;
          &lt;p id="NElat" name ="NElat"&gt;&lt;/p&gt;
          &lt;p id="NElng" name = "NElng"&gt;&lt;/p&gt;
          &lt;/br&gt;
          &lt;p&gt;SouthWest=&lt;/p&gt;
          &lt;p id="SWlat" name ="SWlat"&gt;&lt;/p&gt;
          &lt;p id="SWlng" name ="SWlng"&gt;&lt;/p&gt;
        &lt;/div&gt;
  
          var bounds = map.getBounds();
      var NE = bounds.getNorthEast();
      var SW = bounds.getSouthWest();
  
      var neLat = NE.lat()
      var neLng = NE.lng()
      var swLat = SW.lat()
      var swLng = SW.lng()
  
      document.getElementById("NElat").innerHTML=neLat; 
      document.getElementById("NElng").innerHTML=neLng;
      document.getElementById("SWlat").innerHTML=swLat;
      document.getElementById("SWlng").innerHTML=swLng;
  
      downloadUrl('/data?neLat=' + neLat + "&amp;neLng=" + neLng + "&amp;swLat=" + swLat + "&amp;swLng=" + swLng, function(results) {...}
  </code></pre>
  
  <p>Back-end:</p>
  
  <pre><code> @app.route("/data")
  def data():
      conn = e.connect()
      latt = request.args.get("neLat", "neLat")
      query = conn.execute("SELECT * FROM coordinates WHERE lat &gt; ?", [latt])
      result = {'data': [dict(zip(tuple (query.keys()) ,i)) for i in query.cursor]}
      jsonData = json.dumps(result)
      return jsonData
  </code></pre>