How Can I Pass Data From Template In Django To Javascript In This Specific Case

I am using Google map api and i am trying to pass the data (longitude and latitude) to the template then use the data in the javascript to show a specific location. location.html

Solution 1:

First of all you are assigning your data into a div. Which doesn't have a proper value attribute. Here is a work around by using getAttribute() method.

Assign an attribute named 'value' and it's corresponding data:

location.html

{% for venue in property_listing %}
      {{ venue.address }}</br>
      <div id="long" value="{{ venue.longitude }}">{{ venue.longitude }}</br>
      <div id="lat" value="{{ venue.latitude }}">{{ venue.latitude }}</br>
{% endfor %}

In your javascript function, access the data by getting the attribute of your div ids named value:

<script>var latitude = document.getElementById('lat').getAttribute("value");
      var longitude = document.getElementById('long').getAttribute("value");
      // Initialize and add the mapfunctioninitMap() {
      // The location of Uluruvar uluru = {lat: parseFloat(latitude), lng: parseFloat(longitude)};
      // The map, centered at Uluruvar map = new google.maps.Map(
          document.getElementById('map'), {zoom: 15, center: uluru});
      // The marker, positioned at Uluruvar marker = new google.maps.Marker({position: uluru, map: map});
    }
</script>

Solution 2:

This should do the trick:

<script>var latitude = {{ venue.latitude }};
      var longitude = {{ venue.longitude }};
      // Initialize and add the mapfunctioninitMap() {
      // The location of Uluruvar uluru = {lat: latitude, lng: longitude};
      // The map, centered at Uluruvar map = new google.maps.Map(
          document.getElementById('map'), {zoom: 15, center: uluru});
      // The marker, positioned at Uluruvar marker = new google.maps.Marker({position: uluru, map: map});
    }


    </script>