javascript - Populating an array from an AJAX call and returning it to calling function -
i using gmap3
extension google maps api
, jquery
.
i have .gpx
file read via ajax , each coordinate , add array. return array populate polyline in map.
in function test count of points before return , count 0.
here function processes .gpx file return coordinates:
function test() { var points = []; $.ajax({ type: "get", url: "gpx/12345.gpx", datatype: "xml", success: function (xml) { $(xml).find("trkpt").each(function () { var lat = $(this).attr("lat"); var lon = $(this).attr("lon"); var p = new google.maps.latlng(lat, lon); points.push(p); }); } }); return points; } $(document).ready(function () { var points = test(); var route1latlng = new google.maps.latlng(-33.7610590, 18.9616790); $('#map_canvas').gmap3({ map: { options: { center: route1latlng, zoom: 11 } }, polyline: { options: { path: points, strokecolor: '#ff00aa', strokeopacity: .7, strokeweight: 4 } } }); });
in ie9 polyline not drawn, in firefox draws properly.
what happening call test return points, async request not hault execution of program , return empty array of points. using empty array plot line not displayig. display once ajax request completed. wrapper plotting of marker function , call when ajax call has been completed.
try calling function in success event of ajax this
function test() { var points = []; $.ajax({ type: "get", url: "gpx/12345.gpx", datatype: "xml", success: function (xml) { $(xml).find("trkpt").each(function () { var lat = $(this).attr("lat"); var lon = $(this).attr("lon"); var p = new google.maps.latlng(lat, lon); points.push(p); }); drawpolyline(points); //when points have been loaded call method } }); } function drawpolyline(pointstobedrawn){ // method gets points , plots var route1latlng = new google.maps.latlng(-33.7610590, 18.9616790); $('#map_canvas').gmap3({ map: { options: { center: route1latlng, zoom: 11 } }, polyline: { options: { path: pointstobedrawn, strokecolor: '#ff00aa', strokeopacity: .7, strokeweight: 4 } } }); } $(document).ready(function () { test(); // need method plot markers on success event of });
of use ajax false as
$.ajax({ async: false, //dont use quotes here "false". type: "get", url: "gpx/12345.gpx", datatype: "xml", success: function (xml) { $(xml).find("trkpt").each(function () { var lat = $(this).attr("lat"); var lon = $(this).attr("lon"); var p = new google.maps.latlng(lat, lon); points.push(p); }); drawpolyline(points); } });
if set async false our program wait ajax req complete process.
read how ajax call works , threading more clarification
Comments
Post a Comment