Google Maps API - Масштаб для Fusion Таблица Layer Query Results

Question

Новичок в Stack Overflow разноски/послушник с Maps API - так что у меня не хватает "репутации", чтобы разместить более 2 ссылки

Работа на API Карт Google который обращается сводная таблица (общественное значение) -

https://www.google.com/fusiontables/DataSource?docid=13H4lBUCA1z_mdCJEyCalF0AKgIDtr_C7lIZzQ6D6

бы хотелось, чтобы увеличить к результатам запроса к слою генерируемого из меню сайдбара. Видели различные примеры/экспериментировали с работой с ними в качестве отправной точки (смотрите здесь различные должности). Во всех случаях/разных примерах я модифицировал/адаптировал, я могу заставить слой появиться и ответить на различные запросы, но не увеличивать (даже попытался изменить таблицу, чтобы включить столбец, подобный примеру в качестве теста)

Текущий пример (! упоминается в нескольких потоках здесь - спасибо geocodezip) Я работаю с является

http://www.geocodezip.com/www_vciregionmap_comC.html

Держите получаю ошибку синтаксического анализа - «ошибка в запросе: не удалось обработать запрос» - уверен, что это в синтаксисе о том, как я настраиваю запрос ...

Использование JEditey в Google D отрываться (Mac/хром) - Пример Работает отлично на этой основе, когда я скопировал его на

Javascript файл (отдельно):

var FT_TableID = "13H4lBUCA1z_mdCJEyCalF0AKgIDtr_C7lIZzQ6D6"; // 1288005; // 1200417; 
// geocoded addresses with the spreadsheet geocoder: 
// http://blog.pamelafox.org/2008/11/geocoding-with-google-spreadsheets-and.html 

var layer = null; 

function initialize() { 
//SET CENTER 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: new google.maps.LatLng(20.574814, -174.642222), 
     zoom: 2, 
     scrollwheel:false, 
     mapTypeControl: true, 
     streetViewControl: false, 
     overviewMapControl: true, 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
     }, 
// CONTROLS  
     zoomControl: true, 
     zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.SMALL 
     }, 
     mapTypeId: 'roadmap' 
    }); 


// GET DATA  
    layer = new google.maps.FusionTablesLayer({ 
     query: { 
     //Previous select: 'latitude', /* was 'Latitude,Longitude', used to work... */ 
     select: 'Continent', 
     from: FT_TableID 
     } 
    }); 
//SET MAP  
    layer.setMap(map); 
} 
function changeQuery(term) { 
    layer.setOptions({query:{select:'Continent', /* was 'Latitude,Longitude', used to work... */ 
          from:FT_TableID, 
          //OLd where:"District = "+term 
          where: "'Continent' contains '" + term + "'" 
          } 

}); 
//alert("query="+term); 


// zoom and center map on query results 
    //set the query using the parameter 
    //var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM " + FT_TableID + " WHERE Continent contains "+"'"+term+"'"); 

    var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM " + FT_TableID + " WHERE 'Continent' contains "+"'"+term+"'"); 

    //alert(queryText) 

    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 
    //alert(query) 

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

} 

function zoomTo(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(); 

    var bounds = new google.maps.LatLngBounds(); 
    for(i = 0; i < numRows; i++) { 
     var point = new google.maps.LatLng(
      parseFloat(response.getDataTable().getValue(i, 0)), 
      parseFloat(response.getDataTable().getValue(i, 1))); 
     bounds.extend(point); 
    } 
    alert("bounds =" +bounds) 
    // zoom to the bounds 
    map.fitBounds(bounds); 
} 

HTML файл: - также отдельный CSS файл

<!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"/> 

<link rel="stylesheet" type="text/css" href="style.css"> 
<script language="javascript" type="text/javascript" src="code.js"></script> 

<title>Waterkeeper Locations</title> 

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<script type="text/javascript"> 
    google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']}); 
</script> 

</head> 

<body onload="initialize();"> 

<div id="topBar"> 
</div> 

<header> 

<div id="logo">&nbsp;</div> 
    <h1>Waterkeeper Locations Map </h1> 
</header> 

<div id="wrapperMain"> 

<div id="zoomControl"> 

<div class="clear"></div> 
</div>      

<div id="map_canvas" class="map"> 

</div> 
<div id="legend"> 
<h1> Regions</h1> 
    <ul> 
     <li><label><a href="javascript:changeQuery('United States');">United States</a></label> </li> 
     <li><label><a href="javascript:changeQuery('South America');">South America</a></label> </li> 
     <li><label><a href="javascript:changeQuery('Russian');">Russian Federation</a></label> </li> 
     <li><label><a href="javascript:changeQuery('Mexico');">Mexico</a></label></li> 
     <li><label><a href="javascript:changeQuery('Asia');">Asia</a></label> </li> 
     <li><label><a href="javascript:changeQuery('India');">India</a></label></li> 
     <li><label><a href="javascript:changeQuery('Europe');">Europe</a></label></li> 
     <li><label><a href="javascript:changeQuery('Canada');">Canada</a></label> </li> 
     <li><label><a href="javascript:changeQuery('Australia');">Australia</a></label> </li> 
     <li><label><a href="javascript:changeQuery('Africa');">Africa</a></label> </li> 
    </ul> 

</div> 

</div> 

</body> 
</html> 

Answer 1

имена колонок чувствительны к регистру.

используется Latitude и Longitude внутри запроса, но имена в нижнем регистре: latitude & longitude

Рабочий фрагмент кода:

google.load('visualization', '1', { 
 
    'packages': ['corechart', 'table', 'geomap'] 
 
}); 
 
var FT_TableID = "13H4lBUCA1z_mdCJEyCalF0AKgIDtr_C7lIZzQ6D6"; // 1288005; // 1200417; 
 
// geocoded addresses with the spreadsheet geocoder: 
 
// http://blog.pamelafox.org/2008/11/geocoding-with-google-spreadsheets-and.html 
 

 
var layer = null; 
 

 
function initialize() { 
 
    //SET CENTER 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
    center: new google.maps.LatLng(20.574814, -174.642222), 
 
    zoom: 2, 
 
    scrollwheel: false, 
 
    mapTypeControl: true, 
 
    streetViewControl: false, 
 
    overviewMapControl: true, 
 
    mapTypeControlOptions: { 
 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
 
    }, 
 
    // CONTROLS  
 
    zoomControl: true, 
 
    zoomControlOptions: { 
 
     style: google.maps.ZoomControlStyle.SMALL 
 
    }, 
 
    mapTypeId: 'roadmap' 
 
    }); 
 

 

 
    // GET DATA  
 
    layer = new google.maps.FusionTablesLayer({ 
 
    query: { 
 
     //Previous select: 'latitude', /* was 'Latitude,Longitude', used to work... */ 
 
     select: 'Continent', 
 
     from: FT_TableID 
 
    } 
 
    }); 
 
    //SET MAP  
 
    layer.setMap(map); 
 
} 
 

 
function changeQuery(term) { 
 
    layer.setOptions({ 
 
    query: { 
 
     select: 'Continent', 
 
     /* was 'Latitude,Longitude', used to work... */ 
 
     from: FT_TableID, 
 
     //OLd where:"District = "+term 
 
     where: "'Continent' contains '" + term + "'" 
 
    } 
 

 
    }); 
 
    //alert("query="+term); 
 

 

 
    // zoom and center map on query results 
 
    //set the query using the parameter 
 
    //var queryText = encodeURIComponent("SELECT 'Latitude', 'Longitude' FROM " + FT_TableID + " WHERE Continent contains "+"'"+term+"'"); 
 

 
    var queryText = encodeURIComponent("SELECT 'latitude', 'longitude' FROM " + FT_TableID + " WHERE 'Continent' contains " + "'" + term + "'"); 
 

 
    //alert(queryText) 
 

 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 
 
    //alert(query) 
 

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

 
} 
 

 
function zoomTo(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(); 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 
    var numResults = 0; 
 
    for (i = 0; i < numRows; i++) { 
 
    if (!isNaN(parseFloat(response.getDataTable().getValue(i, 0))) && !isNaN(parseFloat(response.getDataTable().getValue(i, 1)))) { 
 
     var point = new google.maps.LatLng(
 
     parseFloat(response.getDataTable().getValue(i, 0)), 
 
     parseFloat(response.getDataTable().getValue(i, 1))); 
 
     numResults++; 
 
     bounds.extend(point); 
 
    } 
 
    } 
 
    // alert("bounds =" +bounds) 
 
    // zoom to the bounds 
 
    if (numResults > 1) map.fitBounds(bounds); 
 
    else if (numResults == 1) map.setCenter(point); 
 
    else alert("no results"); 
 

 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<div id="topBar"> 
 
</div> 
 

 
<header> 
 

 
    <div id="logo">&nbsp;</div> 
 
    <h1>Waterkeeper Locations Map </h1> 
 
</header> 
 

 
<div id="wrapperMain"> 
 

 
    <div id="zoomControl"> 
 

 
    <div class="clear"></div> 
 
    </div> 
 

 
    <div id="map_canvas" class="map" style="height:500px; width:500px;"> 
 

 
    </div> 
 
    <div id="legend"> 
 
    <h1> Regions</h1> 
 
    <ul> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('United States');">United States</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('South America');">South America</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('Russian');">Russian Federation</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('Mexico');">Mexico</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('Asia');">Asia</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('India');">India</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('Europe');">Europe</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('Canada');">Canada</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('Australia');">Australia</a> 
 
     </label> 
 
     </li> 
 
     <li> 
 
     <label><a href="javascript:changeQuery('Africa');">Africa</a> 
 
     </label> 
 
     </li> 
 
    </ul> 
 

 
    </div> 
 

 
</div>