Harnessing the Google Maps JavaScript API the Right Way

JavaScript
1

I’ve followed the Sitepoint article “Harnessing the Google Maps JavaScript API the Right Way” and placed my JavaScript in a separate .js file.

However, when I did this, my .ajax stopped pulling the data. The .ajax references a php page which pulls data for my map.

The map works when all of the code is in the same file.

Any ideas?

2

Just a guess but sounds like an import/ order of operations issue. Is there a console.log and / or whats the network tab telling you?

3 
  function getHtnData(callback) {
    // load the HTN data from fetchmapdata.php
    console.log("trying to get the data...");

      $.ajax({
    		method: "POST",
            url: "fetchmapdata.php",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {       	//r is a json object				
               callback(r);    
               console.log("data retrieved");           
            },
            failure: function (r) {
                console.log("failure");
            },
            error: function(jqxhr, status, exception) {
              console.log('Exception:', exception);
            }
        }); 
     
  }

The console says “trying to get the data…”

4

Then that’s all folks?

Maybe an “after” log will output? eg.

function getHtnData(callback) {
    // load the HTN data from fetchmapdata.php
    console.log("trying to get the data..."); 
… 
            error: function(jqxhr, status, exception) {
              console.log('Exception:', exception);
            }
        }); 
     console.log("at end of getHtnData function ..."); 
  }
5

Thanks so much for your help.

You are correct! It seems to be an order of operations issue.

function getHtnData(callback) {
        // load the HTN data from fetchmapdata.php
        console.log("trying to get the data...");

          $.ajax({
        		method: "POST",
                url: "fetchmapdata.php",
                data: {},
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {       	//r is a json object				
                   callback(r);    
                   console.log("data retrieved");           
                },
                failure: function (r) {
                    console.log("failure");
                },
                error: function(jqxhr, status, exception) {
                  console.log('Exception:', exception);
                }
            }); 
         console.log("at end of getHtnData function...")
      }   

      function loadHtnData(variable){
        console.log("loading htnData")
        // using callback to process data returned by ajax
        getHtnData(function(htnData){
       //console.log(variable);

        htnData.forEach(function(row){
        var htnVariable = row[variable];
        var CensusTract = row['CensusTract'];

// more code.

“loading htnData” appears in the console before “trying to get the data”.

I thought that using the callback would make loadingHtnData happen after the ajax call.

Apparently not. How can I fix this?

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.