Question

I am new to JavaScript.

Writing a script that uses GooogleMaps API

Working OK. Get Lat Lngs from Database, Make markers, put on Map.

Decided to move a function call up a level, (it was in the OnSuccess method of a PageMethod call). Stopped working.

Put in alerts to diagnose. Starts working.

Narrowed down to having alert at top of called function MakeLatLngs().

MakeLatLngs code appears to execute regardless of alert being present or commented out.
It is just that the map displays with alert statement in and doesn’t display with alert statement commented out.
The alert is just text and not using any variable. So I am at a loss to understand what is going on here.

The same thing is happening in the function that draws the map DrawMap(). I put an informative alert at the start of the function and the map draws. Leave it out and the map doesn’t.

Any clues as to what is going on would be appreciated?

The script is below.
Flow starts at function Initialise at bottom of script.
thanks

     var myPositions = [];
     var myRoutes = [];
     var myString = [];
     var myLatLngs = [];
     var myTitles = [];
     var NumPoints;
     var map;
     var poly;
     var RouteName;
     var myMarkers = [];
     var myMapCentre = new google.maps.LatLng(-41.2954168187213, 174.767133718655);
     function DrawMap() {
         alert("Generating Points for " + RouteName);// Need this to display
         var thisLatLng = myLatLngs[0];

         var myOptions = {
             zoom: 8,
             center: thisLatLng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         };

         map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

         MakeMarkers();
         RouteLine();
     }

     function OnSuccess1(response) {
         myPositions = new Array();

         myString = response;

         NumPoints = response.length;
         for (var i = 0; i < NumPoints; i++) {
             myPositions[i] = response[i];

         }
     }
     function OnError1(response) {
     }

     function Marker()
     {
     this.meterId=0;
     this.latLng="";
     }
     function OnSuccess(response) {
         myPositions = new Array();

         myString = response;

         NumPoints = response.length;
         alert("Numpoints is " + NumPoints);
         for (var i = 0; i < NumPoints; i++) {
             myPositions[i] = response[i];

         }
         alert("Exiting OnSuccess");
         //MakeLatLngs(); //ORIGINAL POSITION OF LATLNG CALL
         return true;
     }

     function setRoute() {
     RouteName = prompt(' What route?', '');

     }

     function OnError(error) {
         alert("In Error");
     }
     function RouteLine() {
         var polyOptions = {
             strokeColor: '#000000',
             strokeOpacity: 1.0,
             strokeWeight: 3
         }
         poly = new google.maps.Polyline(polyOptions);
         poly.setMap(map);
         var path = poly.getPath();
         for (var i = 0; i < NumPoints; i++) {
             path.push(myLatLngs[i]);
         }

     }

     function MakeLatLngs() {
         alert("You need me now " );//Got to have this to display OK when called from LoadData
         myLatLngs = new Array();
         for (var i = 0; i < NumPoints; i++) {

             var sMarker = myPositions[i];

             var SeqPos = sMarker.indexOf(";");
             var latLngPos = sMarker.indexOf(";", SeqPos + 1);
             var marker = sMarker.substring(0, latLngPos);
             //alert("Marker is " + marker);
             //var Seq = sMarker.substring(latLngPos + 1, SeqPos - latLngPos);
             myTitles[i] = marker;
             //alert("MeterId is " + marker);
             var sLatLng = sMarker.substring(latLngPos + 1)
             //alert("SLatLng is " + sLatLng);
             var pos = sLatLng.indexOf(",");
             //alert("pos is " + pos);
             var sLat = sLatLng.substring(0, pos);
             //alert("sLat is " + sLat);
             var sLng = sLatLng.substring(pos + 1, sLatLng.length - 1);
             //alert("sLng is " + sLng);
             var lat = parseFloat(sLat);
             var lng = parseFloat(sLng);


             //alert("Lat is " + lat + " Long is " + lng);
             if (!isNaN(lng) && !isNaN(lat) && lat != 0 && lng != 0 ) {
                 var latlng = new google.maps.LatLng(lat, lng);
                 myLatLngs[i] = latlng;
             }

         }
         alert("Exiting MakeLatLngs")

     }

     function MakeMarkers() {

         for (var i = 0; i < NumPoints; i++) {
             var sTitle = "MyValue " + i;
             var marker = new google.maps.Marker({
                 position: myLatLngs[i],
                 map: map,
                 title: myTitles[i]
             });
         }
     }

     function LoadData() {

         setRoute();//Get the desired route from the user
         PageMethods.GetMarkers(RouteName, OnSuccess, OnError);
         MakeLatLngs(); //Works here ONLY WHEN AN ALERT IS FIRST LINE in FUNCTION. Orginal call was at end of OnSuccess
         //PageMethods.GetRouteBoundaries(OnSuccess1, OnError1);
         return false;
     }

     function initialize() {

         LoadData();
         DrawMap();
     }

     google.maps.event.addDomListener(window, 'load', initialize);//yes you do need this with or without <body onload="initialise">

Answer 1

The reason is that your PageMethods.GetMarkers is asynchronous, so the data hasn’t loaded when you invoke DrawMap. I guess when you use the alert, it pauses execution long enough for the data to load. Put the DrawMap method inside the OnSuccess of the page method, and that should solve the problem.