Several pins on flask google map API

Question

Several pins on flask google map API

I'm currently developing a flask application and I am trying to retrieve coordinates from a mysql database. The database contains latitude and longitude information, and my goal is to display all the markers on the page with their respective lat/lng values. I am attempting to use JavaScript to add these markers, but for some reason it's not working as expected. Any assistance would be greatly appreciated.

Using Flask SQLAlchemy to retrieve lat/lng data

<script>
    $(document).ready(function () {
        function initMap() {
            var latlng = {lat: -37.8253632, lng: 144.1404107}; // THIS IS CENTER OF THE MAP
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: latlng
            });

            google.maps.event.addListenerOnce(map, 'tilesloaded', addMarkers);

            function addMarkers() {
                {% for CarD in page_data %}
                  var point = {lat: {{ CarD.lat }}, lng: {{ CarD.lng }} };
                  var marker = new google.maps.Marker({
                    position: point,
                    map: map,
                    title: '!'
                });
                    {% endfor %}

                marker['infowindow'] = new google.maps.InfoWindow({
                    content: '<div id="content" style="text-align: center"></div>'
                }); // info of the point

            }
        }
    });
</script>

javascript mysql google-maps flask

Answer 1

Answer №1

When working with jinja templates, keep in mind that they are processed on the server side. If you want to use python variables in javascript, it's best to have both the html and js code in the same .html file. Avoid mixing the two codes together; instead, consider making an ajax call to receive a json response with your points. In Flask, you can achieve this by creating an endpoint like the following:

@app.route('/api/coordinates) 
def coordinates():
  addresses = session.query(Coordinates)#however you query your db
  all_coods = [] # initialize a list to store your addresses
  for add in addresses:
     address_details = {
     "lat": add.lat, 
     "lng": add.lng, 
     "title": add.title}
     all_coods.append(address_details)
  return jsonify({'cordinates': all_coods})

In your javascript code, you can then call this endpoint to process the json object using fetch for ajax calls, as demonstrated below:

var map;
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(-33.91722, 151.23064),
          mapTypeId: 'roadmap'
        });

//define the endpoint
var coodAddresses = 'https://yoursite.com/api/coordinates';
var locations = []; //array to hold coordinates

fetch(coodAddresses)
.then(function(response) {
 return response.text();
 }).then(function(body) {
 var obj = JSON.parse(body);
 var myAdd = {};
 var addresses = obj.cordinates;
 var l = addresses.length;
 for (i = 0; i < l; i++) {
 myAdd = {
      position: {
          lat: parseFloat(obj.cordinates[i].lat),
          lng: parseFloat(obj.cordinates[i].lng)
                },
          title: obj.cordinates[i].title,
           };
 locations.push(myAdd);
}
locations.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            title: feature.title,
            map: map
          });
        });

}).catch(function() {
                var pos = {
                    lat: lat,
                    lng: lng
                };
                infoWindow.setMap(map);
                infoWindow.setPosition(pos);
                infoWindow.setContent('An error occurred, we are unable to retreive cordinates.');

            });
      }

Remember to ensure that the bounds include all your points if they are not near each other. I hope you find this information helpful.

Answer 2

When working with jinja templates, keep in mind that they are processed on the server side. If you want to use python variables in javascript, it's best to have both the html and js code in the same .html file. Avoid mixing the two codes together; instead, consider making an ajax call to receive a json response with your points. In Flask, you can achieve this by creating an endpoint like the following:

@app.route('/api/coordinates) 
def coordinates():
  addresses = session.query(Coordinates)#however you query your db
  all_coods = [] # initialize a list to store your addresses
  for add in addresses:
     address_details = {
     "lat": add.lat, 
     "lng": add.lng, 
     "title": add.title}
     all_coods.append(address_details)
  return jsonify({'cordinates': all_coods})

In your javascript code, you can then call this endpoint to process the json object using fetch for ajax calls, as demonstrated below:

var map;
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(-33.91722, 151.23064),
          mapTypeId: 'roadmap'
        });

//define the endpoint
var coodAddresses = 'https://yoursite.com/api/coordinates';
var locations = []; //array to hold coordinates

fetch(coodAddresses)
.then(function(response) {
 return response.text();
 }).then(function(body) {
 var obj = JSON.parse(body);
 var myAdd = {};
 var addresses = obj.cordinates;
 var l = addresses.length;
 for (i = 0; i < l; i++) {
 myAdd = {
      position: {
          lat: parseFloat(obj.cordinates[i].lat),
          lng: parseFloat(obj.cordinates[i].lng)
                },
          title: obj.cordinates[i].title,
           };
 locations.push(myAdd);
}
locations.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            title: feature.title,
            map: map
          });
        });

}).catch(function() {
                var pos = {
                    lat: lat,
                    lng: lng
                };
                infoWindow.setMap(map);
                infoWindow.setPosition(pos);
                infoWindow.setContent('An error occurred, we are unable to retreive cordinates.');

            });
      }

Remember to ensure that the bounds include all your points if they are not near each other. I hope you find this information helpful.

Several pins on flask google map API

Answer №1

Similar questions

Utilizing the JavaScript Array.find() method to ensure accurate arithmetic calculations within an array of objects

Sending data from Web Service to Ajax Request success callback function

How can CakePHP 3 perform a table join using a different table?

Performing a $.POST request on a Squarespace webpage

JavaScript script that parses innerHTML

A function that listens for the onmouseover event and updates the image source of an HTML img element

Error in node - Invalid URI received during npm-request operations

Utilizing the jexcel plugin to seamlessly integrate arrays for a personalized subtitle editing experience

What is the best way to import tab-delimited data from a text file into a MySQL database using CodeIgniter?

Having trouble with blockUI compatibility on Internet Explorer 11?

"Enhancing Forms with Multiple Event Listeners for Seamless Sub

Creating Blurry Text Effects in HTML (Step-by-Step Tutorial)

Refresh all $(document).ready(); functions after AJAX has finished loading

Modify the background of a div and an image

Tips for utilizing import alongside require in Javascript/Typescript

Whenever a POST request is received, Flask always replies with a status code of 400

Tips for invoking a url with JavaScript and retrieving the response back to JavaScript

Ways to identify when a jQuery ajax request has finished executing?

Testing the unit with a customized header in the interceptor

What is the process by which a JavaScript Date object is converted to a string when you log it to the