javascript - Fusion テーブルからデータを取得する

Question

再び。逆ジオコーディングではなく、アドレスルックアップに基づいてフュージョンテーブルからデータを呼び出そうとしていますが、e ルックアップで何が間違っていたのかわかりません。どんな助けでも大歓迎です。

ここにページのコードがあります、私は働いています:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var tableId = '1oGlrsLe3rfQWRT3g7exHtQjxKDwUHH97xDqhTuw'; 
  var geocoder = null; 
  var map = null; 
  var layer = null; 
  var marker = null; 
  var address = '509 E 47th St, Chicago, IL 60653'; 
  function codeAddress() { 
var address = document.getElementById('street_add').value; 
address += " "+document.getElementById('city').value; 
address += " "+document.getElementById('state').value; 
address += " "+document.getElementById('postcode').value; 
address += " "+document.getElementById('country').value; 

    geocoder.geocode( { 'address': address}, geocoderCallback );  
  } 


  function initialize() { 
    var myOptions = { 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.addListener(map, 'click', function(e) { 
      geocoder.geocode( { 'location': e.latLng}, geocoderCallback); 
    }); 

    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode( { 'address': address}, geocoderCallback); 
  } 

function displayNeighborhood(address) { 
  for (p = address.length-1; p >= 0; p--) { 
    if (address[p].types.indexOf("neighborhood") != -1) { 
       document.getElementById('neighborhood').innerHTML= address[p].long_name; 
    } 
  } 
} 
function geocoderCallback (results, status) { 
      document.getElementById('neighborhood').innerHTML=""; 

      if (status == google.maps.GeocoderStatus.OK) { 
        map.setCenter(results[0].geometry.location); 
        var lat = results[0].geometry.location.lat(); 
        var lng = results[0].geometry.location.lng(); 

        if (marker) marker.setMap(null); 

        marker = new google.maps.Marker({ 
            map: map,  
            position: results[0].geometry.location 
        }); 
        displayNeighborhood(results[0].address_components); 
        if (!layer)  
        { 
            layer = new google.maps.FusionTablesLayer({ 
              query: { 
                select: 'geometry', 
                from: tableId, 
                where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))', 
                limit: 1 
              } 
            }); 
            layer.setMap(map); 
        }  
        else  
        {  
           layer.setOptions({ 
              query: { 
                select: 'geometry', 
                from: tableId, 
                where: 'ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))', 
                limit: 1 
              } 
            }); 
        } 
      } else { 
        alert("Geocode was not successful for the following reason: " + status); 
      } 
}; 
</script> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function () { 
var str = $('#neighborhood').text(); 
$('#area').val(str); 
}); 
</script> 
<SCRIPT LANGUAGE="JavaScript"> 
function readText (form) { 
    TestVar =document.getElementById('sidebar').innerHTML = fusiontabledata; 
    alert ("You typed: " + TestVar); 
} 

function writeText (form) { 
    form.area.value =document.getElementById('sidebar').innerHTML = fusiontabledata; 
} 
</SCRIPT> 
<script> 
function  createSidebar(query) { 
  // https://www.google.com/fusiontables/api/query?sql=SELECT%20ROWID,%20%2A%20FROM%20564705 

  //set the query using the parameter 
  var queryText = encodeURIComponent(query); 
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText); 


  //set the callback function 
  query.send(getData); 

} 

var FTresponse = null; 
//define callback function, this is called when the results are returned 
function getData(response) { 
if (!response) { 
  alert('no response'); 
  return; 
} 
if (response.isError()) { 
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
  return; 
}  
  FTresponse = response; 
  //for more information on the response object, see the documentation 
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse 
  numRows = response.getDataTable().getNumberOfRows(); 
  numCols = response.getDataTable().getNumberOfColumns(); 

  //concatenate the results into a string, you can build a table here 
  fusiontabledata = "<table><tr>"; 
//  for(i = 0; i < numCols; i++) { 
    fusiontabledata += "<th>" + response.getDataTable().getColumnLabel(0) + "</th>"; 
//   } 
  fusiontabledata += "</tr><tr>"; 

  for(i = 0; i < numRows; i++) { 
//    for(j = 0; j < numCols; j++) { 
      fusiontabledata += "<td>"+response.getDataTable().getValue(i, 0) + "</a></td>"; 
//    } 
    fusiontabledata += "</tr><tr>"; 
  } 
  fusiontabledata += "</table>"   
  //display the results on the page 
  document.getElementById('sidebar').innerHTML = fusiontabledata; 

createSidebar("SELECT Name, geometry FROM "+tableid+" WHERE ST_INTERSECTS ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1)"); 
</script> 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">  
</script>  
<script type="text/javascript">  
_uacct = "UA-162157-1"; 
urchinTracker(); 
</script>  
</head> 
<body onload="initialize()"> 
  <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
          <td width="20"><form name="a"> 
         <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td width="18%">Unit / Office:</td> 
    <td width="82%"><label for="aunit"></label> 
      <input type="text" name="aunit" id="aunit" onblur="document.main.Unit .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>Street Number:</td> 
    <td><input name="anumber" type="textbox" class="address" id="street_add" value="532 Beacon St" onblur="document.main.Number .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>Street:</td> 
    <td><input name="astreet" type="textbox" class="address" id="city" value="Boston" onblur="document.main.Street .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>Post Code:</td> 
    <td><input name="apcode" type="textbox" class="address" id="country" value="" onblur="document.main.PostCode .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>Suburb:</td> 
    <td><input name="asuburb" type="textbox" class="address" id="state" value="MA" onblur="document.main.Suburb .value = this.value;"></td> 
  </tr> 
  <tr> 
    <td>State</td> 
    <td><label for="state"></label> 
      <select name="astate" class="address" id="postcode" onblur="document.main.State .value = this.value;codeAddress();"> 
        <option>Select State</option> 
        <option value="Qld">Queensland</option> 
        <option value="ACT">Australian Capital Territory</option> 
        <option value="NSW">New South Wales</option> 
        <option value="NT">Northern Territory</option> 
        <option value="SA">South Australia</option> 
        <option value="Tas">Tasmania</option> 
        <option value="Vic">Victoria</option> 
        <option value="WA">Western Australia</option> 
      </select></td> 
  </tr> 
  <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
  </tr> 
</table> 
         <br> 
          </form></td> 
        </tr> 
        <tr> 
          <td>&nbsp;</td> 
        </tr> 
    </table></td> 
    </tr> 
</table> 

<div id="map_canvas" style="height: 250px; width: 250px;"></div> 

<div id="sidebar" style="position:relative; padding: 5px; left:20px; top:300px; width:200px; height:200px; border-style:solid; border-width:1px; border-color:#333333; z-index:3; overflow:auto"> 
      <p class="style1">Radius polygons</p> 
      <p>&nbsp; </p> 
    </div> 
</script><br><form action="" method="post" name="main" id="main"> 
  <input type="button" name="button2" value="Confirm Address" onClick="writeText(this.form)"><P> 
  <label for="Unit2"></label> 
  Hidden fields  <br> 
  area 
<input type="text" name="area" value=""> 
  unit 
  <input type="text" name="Unit" id="Unit"> 
    no 
    <label for="Number"></label> 
    <input type="text" name="Number" id="Number"> 
    street 
    <label for="Street"></label> 
    <input type="text" name="Street" id="Street"> 
    <label for="Suburb"></label> 
    suburb 
    <input type="text" name="Suburb" id="Suburb"> 
    <label for="State"></label> 
    state 
    <input type="text" name="State" id="State"> 
    <label for="PostCode"></label> 
    post 
    <input type="text" name="PostCode" id="PostCode"> 
    <label for="SupportArea"></label> 
  </form> 
<br> 



<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">  
</script>  
<script type="text/javascript">  
_uacct = "UA-162157-1"; 
urchinTracker(); 
</body> 
</html>

javascript - Fusion テーブルからデータを取得する

0 に答える 0

Related

Reference