JavaScript for loop error placing markers on Google Map

Question

Getting close to solving a three-day problem. I'm attempting to place markers on a Google Map using the lat, long stored in a Django model. I've never used AJAX before but am trying to do so to achieve this. Using Firebug, it's stating I have a for loop error in the JavaScript although I'm usure what it is (new at JavaScript). The source is displaying the lat, longs pulling up, although I'm usure the format is perfect (ends in a comma).

The code is below if anyone spots the error. Insight much appreciated:

<script>
function mainGeo()
    {
         if (navigator.geolocation) 
            {
              navigator.geolocation.getCurrentPosition( mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
        }
        else
        {
              alert("Sorry, but it looks like your browser does not support geolocation.");
        }
    }




var map;



 function mainMap(position)
 {
       // Define the coordinates as a Google Maps LatLng Object
       var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

       // Prepare the map options
       var mapOptions =
      {
                  zoom: 15,
                  center: coords,
                  mapTypeControl: false,
                  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                  mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Create the map, and place it in the map_canvas div
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // Place the initial marker
        var marker = new google.maps.Marker({
                  position: coords,
                  map: map,
                  title: "Your current location!"
        });
    }


function error() {
        alert("You have refused to display your location. You will not be able to submit stories.");
        }

mainGeo();

var stories = [{% for story in stories %}
            {latitude:{{story.latitude}},longitude:{{story.longitude}}}, {% endfor %}];


loadMarkers(stories);

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



 </script>

Answer 1

Maybe the line saying var story = story[s]; should be var story = stories[s]; .