Question

I am querying a PostGIS database based on where a user clicks on a google map. I am then parsing the JSON response into a googleMaps infoWindow. This has been working great but I’d now like to query multiple urls and use those responses to fill in the infoWindow. Below is an example of the functions I’ve used that work great. Note: please disregard the url provided as I just made it up for this example.

var clickLoc;

function queryAct(event){
clickLoc=event.latLng;  
var clickLat=clickLoc.lat();
var clickLng=clickLoc.lng();
var loUrl = 'http://www.myspatialdataset.com/sql/?q=select%20ownercateg%20from%20stew_owners%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29';  
if (window.XMLHttpRequest) { // Non-IE browsers
  req = new XMLHttpRequest();
  req.onreadystatechange = clickResponse;
  try {
    req.open("GET", loUrl, true);
  } catch (e) {
    alert(e);
  }
  req.send(null);
} else if (window.ActiveXObject) { // IE
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
    req.onreadystatechange = clickResponse;
    req.open("GET", loUrl, true);
    req.send();
  }
}

}

function clickResponse(){                               
    if (req.readyState == 4) { // Complete
      if (req.status == 200) { // OK response                     
          var clickPingBack = JSON.parse(req.responseText);
          var loResponse = clickPingBack;
          if (loResponse.rows.length>0)
          {
            var loResponseParsed=loResponse.rows[0].ownercateg;
            fillWithClicked(loResponseParsed);
          }
          else
          {
              var loResponseParsed=' other';
              fillWithClicked(loResponseParsed);                                                                      
          }         
      }
}
}

var infowindow = new google.maps.InfoWindow;

function fillWithClicked(loResponseParsed){ 
infowindow.setContent(loResponseParsed);
infowindow.setPosition(clickLoc);
infowindow.open(map);   
}

How could I now do this for multiple url requests and pass those responses to the same, fillWithClicked function that fills in the infoWindow?

The code below is obviously wrong but may better explain what I am trying to do i.e. multiple URLS and filling the infoWindow with the response from two url requests. This sometimes works but is totally wrong

var clickLoc;

function distQueryAct(event){
clickLoc=event.latLng;  
var clickLat=clickLoc.lat();
var clickLng=clickLoc.lng();
var distUrl = 'http://www.myspatialdataset.com/sql/?q=select%20district%20from%20mt_elk%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29';  
if (window.XMLHttpRequest) { // Non-IE browsers
  distReq = new XMLHttpRequest();
  distReq.onreadystatechange = loQueryAct(clickLoc);
  try {
    distReq.open("GET", distUrl, true);
  } catch (e) {
    alert(e);
  }
  distReq.send(null);
} else if (window.ActiveXObject) { // IE
  distReq = new ActiveXObject("Microsoft.XMLHTTP");
  if (distReq) {
    distReq.onreadystatechange = loQueryAct(clickLoc);
    distReq.open("GET", distUrl, true);
    distReq.send();
  }
}
}

function loQueryAct(clickLoc){
var clickLat=clickLoc.lat();
var clickLng=clickLoc.lng();
var loUrl = 'http://www.myspatialdataset.com/sql/?q=select%20ownercateg%20from%20stew_owners%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29';  
if (window.XMLHttpRequest) { // Non-IE browsers
  loReq = new XMLHttpRequest();
  loReq.onreadystatechange = distClickResponse;
  try {
    loReq.open("GET", loUrl, true);
  } catch (e) {
    alert(e);
  }
  loReq.send(null);
} else if (window.ActiveXObject) { // IE
  loReq = new ActiveXObject("Microsoft.XMLHTTP");
  if (loReq) {
    loReq.onreadystatechange = distClickResponse;
    loReq.open("GET", loUrl, true);
    loReq.send();
  }
}
}

function distClickResponse(){                               
    if (distReq.readyState == 4 && loReq.readyState == 4) { // Complete
      if (distReq.status == 200 && loReq.status == 200) { // OK response                      
          var distPingBack = JSON.parse(distReq.responseText);
          var distResponse = distPingBack;
          var loPingBack = JSON.parse(loReq.responseText);
          var loResponse = loPingBack;
          if (distResponse.rows.length>0)
          {
            var distResponseParsed=distResponse.rows[0].district;
          }
          else
          {
              var distResponseParsed=' other';
          } 
           if (loResponse.rows.length>0)
          {
            var loResponseParsed=loResponse.rows[0].ownercateg;             
          }
          else
          {
              var loResponseParsed=' other';                                                      
          }           
      }
      distFillWithClicked(loResponseParsed,distResponseParsed);                           
}
}

var infowindow = new google.maps.InfoWindow;

function distFillWithClicked(distResponseParsed,loResponseParsed){  
infowindow.setContent(distResponseParsed+loResponseParsed);
infowindow.setPosition(clickLoc);
infowindow.open(map);   
}

Answer 1

I figured it out. Using getJSON instead of XMLHttpRequest was the key. I know this could be cleaner but it does work.

var clickLoc;

function queryAct(event){
clickLoc=event.latLng;  
var clickLat=clickLoc.lat();
var clickLng=clickLoc.lng();    
var toFillArray=Array();
var loUrl='http://www.mypostgis.com/sql/?q=select%20ownercateg%20from%20stew_owners%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29'; 
var distUrl='http://www.mypostgis.com/sql/?q=select%20district%20from%20mt_elk%20where%20ST_Intersects%28the_geom,%20ST_GeomFromText%28%27POINT%28'+clickLng+'%20'+clickLat+'%29%27,4326%29%29';   
$.getJSON(loUrl,function(tmpLoDat){     
    if (tmpLoDat.rows.length>0)
    {
        var tempCat=tmpLoDat.rows[0].ownercateg;        
        toFillArray.push(tempCat);
    }
    else
    {
        var tempCat='other';
        toFillArray.push(tempCat);  
    }       
    otherFunction(toFillArray,distUrl);
    })                  
}

function otherFunction(toFillArray,distUrl){
$.getJSON(distUrl,function(tmpDistDat){
    if (tmpDistDat.rows.length>0)
    {
        var tempDist=tmpDistDat.rows[0].district;
        toFillArray.push(tempDist);
    }
    else
    {
        var tempDist='Other';
        toFillArray.push(tempDist);
    }
    fillWithClicked(toFillArray);
    })      
}



var infowindow = new google.maps.InfoWindow;

function fillWithClicked(toFillArray){ 
infowindow.setContent(toFillArray[0]+toFillArray[1]);
infowindow.setPosition(clickLoc);
infowindow.open(map);   
}