Passing Django variables into Google Maps javascript

Question

I can return a list of locations with associated data into a Django form. This code displays a running_list as text in a django form.

{% for running in running_list %}
<div class="eventholder">
 <div class="event_running">
        <div class="event-contents">
            <p><b>Crew number: {{ running.team }}</b></p>   
            <p><b>Site Address & Job No:</b> {{ running.event.name }}</p>
            <p><b>Coords:</b> {{ running.coords }}</p>
            <p><b>Job Type:</b> {{ running.event.job_type }}</p>
            <p><b>Field personnel name:</b> {{ running.owner }}</p>
            <p><b>Crew contact number:</b> {{ running.owner.phone_number }}</p>
        </div>
    </div>
</div>

{% endfor %}

Ok now I want that same list of variable inserted in the javascript var locations.

   var locations = [
  ['NSW 01 Wadalba, 201-237 Figtree Blvd - 594094', -33.201016, 151.484362],
  ['NSW 02 Cessnock, Lot 702, 43 Trebbiano Dr - 616388', -33.023586, 151.557490],
  ['NSW 03 Redhead, 34 Burns St - 619553', -32.927678, 151.713359],
  ['NSW 04 Maitland, Bulwer St', -32.702620, 151.408145],
  ['NSW 05 Cameron Park, 4 Seacrest Dr - 591516', -33.059075, 151.657199]
];

This is the full google map script.

  <script type="text/javascript">
var locations = [
  ['NSW 01 Wadalba, 201-237 Figtree Blvd - 594094', -33.201016, 151.484362],
  ['NSW 02 Cessnock, Lot 702, 43 Trebbiano Dr - 616388', -33.023586, 151.557490],
  ['NSW 03 Redhead, 34 Burns St - 619553', -32.927678, 151.713359],
  ['NSW 04 Maitland, Bulwer St', -32.702620, 151.408145],
  ['NSW 05 Cameron Park, 4 Seacrest Dr - 591516', -33.059075, 151.657199]
];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: new google.maps.LatLng(-32.927191, 151.520385),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Bhargav Rao · Accepted Answer · 2017-12-28 22:45:27Z

1

You can create a location_json var in the view containing the desired data.

import json

location_json = json.dumps([
    [running.event.name, running.coords.latitude, running.coords.longitude] for running in running_list
])

Then in the Template:

var locations = {{ location_json|safe }};

edited Dec 28, 2017 at 22:45

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Mar 2, 2015 at 8:03

Todor

16.2k6 gold badges61 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing Django variables into Google Maps javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related