Alexandru Vlas Alexandru Vlas - 2 months ago 8
Javascript Question

dynamically push data to object within a loop

I have a list of "places" that is built dynamically in a loop:

for(i = 0; i < railway_s.result.length; i++) {

station = railway_s.result[i];

$("#railway_s_ul").append('<li class="blk"><h2 class="org_name">' + station.stationname + '<a href="http://maps.google.com/maps?q='+ station.latlong.coordinates[1] +','+ station.latlong.coordinates[0] +'" class="btn btn-primary" target="_blank">view on map</a><span class="org_id">Station Code: ' + station.crscode + '</span></h2><div class="distance">Distance: ' + distance + ' miles</div></li>')
}


I have the coordinates of each place in the loop with
station.latlong.coordinates[1]
and
station.latlong.coordinates[0]


and now I'm trying to show each "place" using each place lat and long coordinates on a map

I have the map ready, I have the loop and the list is working fine, but I'm stuck at the code to show each place on the same google map...

I've tried this (typed manually some coordinates) and it works fine...

var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
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));
}


I'm struggling to put the latitude and longitude inside the "var locations" object as well in a loop... can someone please help me with this?

Answer

Inside the loop that dynamically creates your station data add the same data into the locations array

var locations = [];

for(i = 0; i < railway_s.result.length; i++) {

        station = railway_s.result[i];

        // reverse the coordinates[1] and coordinates[0] if needed
        locations.push([station.stationname, station.latlong.coordinates[1], station.latlong.coordinates[0], station.crscode, distance]);

        $("#railway_s_ul").append('<li class="blk"><h2 class="org_name">' + station.stationname + '<a href="http://maps.google.com/maps?q='+ station.latlong.coordinates[1] +','+ station.latlong.coordinates[0] +'" class="btn btn-primary" target="_blank">view on map</a><span class="org_id">Station Code: ' + station.crscode + '</span></h2><div class="distance">Distance: ' + distance + ' miles</div></li>')
}
Comments