Passing Googlemap API V. 3 Markers from Python to Javascript via Jinja2

Question

I have a list in a GSQL database of markers that I wish to send to javascript so that they can be displayed on a google map. In effect, I pass a python list, which looks something like:

[[50.1142, .12231, "MarkerName"], [49.131, -.12232, "MarkerName2"], [48.131, -.12232, "MarkerName3"]]

Via a jinja2 template, as the variable 'maplist.'

My javascript looks like this on the template:

<script type="text/javascript">
        $(document).ready(function () {
                          var latitude = parseFloat("51.515252");
                          var longitude = parseFloat("-0.189852");
                          var latlngPos = new google.maps.LatLng(latitude, longitude);
                          // Set up options for the Google map
                          var myOptions = {
                          zoom: 10,
                          center: latlngPos,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                          };
                          // Define the map
                          map = new google.maps.Map(document.getElementById("map"), myOptions);

                          });

    function addMarker(lat, lng, name){
            var point = new google.maps.LatLng(lat, lng);
            var marker = new google.maps.Marker({position: point,
                                                map: map,
                                                title: name
                                                });

                            };

        </script>

I loop through the list like so:

    {% for marker in maplist %}
    <script type="text/javascript">
    addMarker(parseFloat('{{marker.1}}'),parseFloat('{{marker.2}}'),'{{marker.0}}');
    </script>
    {% endfor %}

However, none of the markers show up on the map. I am not at all confident that my approach is the best, but I had seen it done here: Parsing dictionary from GAE python to create marker objects in javascript / GMaps api, and it made sense to me. Perhaps JSON is a better approach, in which case I would very much appreciate any salient examples (am basically a total Javscript-neophyte)

Answer 1

You're trying to access list indices using object notation. Better to create an array of JSON objects:

[{'lat': 123.3, 'lng': 234.5, 'name': "Foo"}]

And then in your template:

{{marker.lat}}
{{marker.lng}}

Additionally, it seems overly complex to create a new script tag for each data point. Why not just create some variable in the main script tag from which to access all the data. Like this:

<script type="text/javascript">
    var data = {{data}}
    $(document).ready(function () {
                      var latitude = parseFloat("51.515252");
                      var longitude = parseFloat("-0.189852");
                      var latlngPos = new google.maps.LatLng(latitude, longitude);
                      // Set up options for the Google map
                      var myOptions = {
                      zoom: 10,
                      center: latlngPos,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                      };
                      // Define the map
                      map = new google.maps.Map(document.getElementById("map"), myOptions);
                      data.forEach(function(p) {
                          var point = new google.maps.LatLng(p.lat, p.lng);
                          var marker = new google.maps.Marker({position: point,
                                            map: map,
                                            title: p.name
                                            });

                             })
                      });


    </script>