Posizionamento di indicatori su Google Map con Django

Question

Sto provando a posizionare marker basati sulla latitudine e longitudine memorizzati in un modello su una mappa di Google utilizzando la geolocalizzazione API e HTML5.

Il problema è come eseguire il looping delle informazioni lat/lon per ogni oggetto memorizzato all'interno dei tag JavaScript utilizzando parole chiave del modello, che non credo si possano fare in Django.

Ho trovato una domanda simile qui Adding Google Map Markers with DJango Template Tags in Javascript che ho lievemente modificato e messo all'interno di un modello - non è un file script separato - ma non sembra funzionare:

function loadMarkers(){ 
     {% for story in stories %} 
      var point = new google.maps.LatLng({{story.latitude}},{{story.longitude}}); 
      var marker = new google.maps.Marker({ 
      position: point, 
      map: map 
     }); 
     {% endfor %}  
    } 

Tutta la comprensione su come ciclo correttamente attraverso gli oggetti in un oggetto Django salvato con informazioni lat e lon e posizionarli su una mappa di Google utilizzando l'API sarebbe molto apprezzato.

Answer 1

Io uso django-geoposition per gestire la mia geodati

from django.db import models 
from geoposition.fields import GeopositionField 

class Zone(models.Model): 
    name = models.CharField(max_length = 50) 
    kuerzel = models.CharField(max_length = 3) 
    kn_nr = models.CharField(max_length = 5) 
    beschreibung = models.CharField(max_length = 300) 
    adresse = models.CharField(max_length = 100) 
    position = GeopositionField() 

view.py

from geo.models import Zone 
from django.shortcuts import render_to_response, get_object_or_404, redirect 

def ShowZonen(request): 
    zone=Zone.objects.all() 
    return render_to_response('zonen.html', {"zone": zone}) 


def showZoneDetail(request, zone_id): 
    zone=Zone.objects.get(id=zone_id) 
    return render_to_response('zonendetail.html', {"zone": zone}) 

modello zonendetail.html

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 

    var map; 
    function initialize() { 
    var mapDiv = document.getElementById('map-canvas'); 
    map = new google.maps.Map(mapDiv, { 
     center: new google.maps.LatLng(48.208174,16.373819), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

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

    } 
    function addMarkers() { 

     {% for mark in zone %} 
     var point = new google.maps.LatLng({{mark.position.latitude}},{{mark.position.longitude}}); 
      var image = '{{ STATIC_PREFIX }}'+ 'checkmark.png'; 
      var marker = new google.maps.Marker({ 
      position: point, 
      map: map, 
      icon: image, 
      url: 'http://172.16.0.101:8882/zone/' + {{mark.id}}, 
      title: '{{ mark.id }}', 
     }); 
      marker['infowindow'] = new google.maps.InfoWindow({ 
        content: "<h1>{{mark.name}}</h1> <br> {{ mark.name }} <p> <a href=\"http:\/\/172.16.0.101:8882\/zone\/{{ mark.id }}\"> {{ mark.name }}</a>", 
     }); 
      google.maps.event.addListener(marker, 'click', function() { 
       //window.location.href = this.url; 
       this['infowindow'].open(map, this); 
      }); 
      google.maps.event.addListener(marker, 'mouseover', function() { 
       // this['infowindow'].open(map, this); 
        }); 
      google.maps.event.addListener(marker, 'mouseout', function() { 
       // this['infowindow'].close(map, this); 

      }); 





     {% endfor %}  

    } 


    google.maps.event.addDomListener(window, 'load', initialize); 
</script>