CODEWITHSUNDEEP
pythondjangopython-3.xgoogle-mapsdjango-templates
Curtis Banks
Curtis Banks

Reputation: 362

What is the best to render multiple google map markers in DJANGO template

I have looked into similar questions but they have different implementations method therefore i am kind of stuck trying to render a queryset from the view template to be displayed on Google map.

models.py

class Location(models.Model):
    name = models.CharField(max_length=250, blank=False)
    description = models.TextField(max_length=1000, null=True)
    address = models.CharField(max_length=1000)
    longitude = models.DecimalField(max_length=15, decimal_places=8)
    latitude = models.DecimalField(max_length=15, decimal_places=8)

views.py

def index(request):
    locations = Location.objects.all()

    context = {'locations':locations}
    return render(request, 'core/index.html', context)

html

locations currently hardcoded

{% for activity in activities %}
    <script type="text/javascript">
        var locations = [
          ['Stadtbibliothek Zanklhof', 47.06976, 15.43154, 1],
          ['Stadtbibliothek dieMediathek', 47.06975, 15.43116, 2],
          ['Stadtbibliothek Gösting', 47.09399, 15.40548, 3],
          ['Stadtbibliothek Graz West', 47.06993, 15.40727, 4],
          ['Stadtbibliothek Graz Ost', 47.06934, 15.45888, 5],
          ['Stadtbibliothek Graz Süd', 47.04572, 15.43234, 6],
          ['Stadtbibliothek Graz Nord', 47.08350, 15.43212, 7],
          ['Stadtbibliothek Andritz', 47.10280, 15.42137, 8]
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 13,
          center: new google.maps.LatLng(47.071876, 15.441456),
          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));
        }
    </script>
    {% endfor %}

I am just stuck on how and where to place the tags {{ activity.longitude }} and {{ activity.latitude }}. Tried multiple approaches to solve the problem but it end up not rendering google map.

If anyone could help I would much appreciate it.

Upvotes: 2

Views: 1056

Answers (1)

willeM_ Van Onsem
willeM_ Van Onsem

Reputation: 476659

I think it might be better to do the processing at the server side. So we can construct a view that will create a JSON blob:

import json

def index(request):
    locations = [
        [l.name, l.latitude, l.longitude, i]
        for i, l in enumerate(Location.objects.all())
    ]
    context = {'locations': json.dumps(locations)}
    return render(request, 'core/index.html', context)

In the template we then just pass this to the location variable:

<script type="text/javascript">
    var locations = {{ locations|safe }};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: new google.maps.LatLng(47.071876, 15.441456),
      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));
    }
</script>

Upvotes: 1

Related Questions