Colocación de marcadores en Google Map con Django

Question

Estoy tratando de colocar marcadores basados ​​en la latitud y la longitud almacenados en un modelo en un mapa de Google usando la geolocalización de API y HTML5.

El problema es cómo recorrer la información de lat/lon para cada objeto almacenado dentro de las etiquetas de JavaScript utilizando palabras clave de la plantilla, lo cual no creo que se pueda hacer en Django.

me encontré con una pregunta similar aquí Adding Google Map Markers with DJango Template Tags in Javascript la que he modificado ligeramente y se coloca dentro de una plantilla - no es un archivo de secuencia de comandos independiente - pero no parece funcionar:

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 %}  
    } 

Cualquier idea sobre la forma de bucle correctamente a través de elementos en un objeto Django almacenado con información lat, lon y colocarlos en un mapa de Google usando la API sería muy apreciado.

Answer 1

utilizo django-geoposition para gestionar mi geodatos

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}) 

plantilla 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>