Fusion Table layer dropdown query pan и zoom не работает

Я пытаюсь получить эту карту google для панорамирования и масштабирования для выбранного варианта выпадающего списка. Сам выпадающий запрос работает, но я новичок в кодировании, и я не могу понять, что не так с кодом, чтобы получить карту для панорамирования и масштабирования результатов запроса. Заголовок столбца - «Запрос» в таблице google google, поэтому я запутался.Fusion Table layer dropdown query pan и zoom не работает

Вот пример того, что я хочу, чтобы карта сделать: http://www.geocodezip.com/geoxml3_test/www_advocacy_ucla_edu_Assembly_MapC.html

и это, где я получил участки кода панорамирования/масштабирования от: http://www.geocodezip.com/geoxml3_test/v3_SO_FusionTables_pan2Marker.html

И вот мой код :

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="UTF-8"> 
    <!-- <link href="style.css" rel="stylesheet" /> --> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    function initialize() { 
    var tableId = '15wosKAeHC0gcpU_N6UPbxPL09RrEBKlQNEaCmnU'; 
    var locationColumn = 'Lat'; 
    map = new google.maps.Map(document.getElementById('googft-mapCanvas'), { 
     center: new google.maps.LatLng(34.03,-111.9), 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 

    layer = new google.maps.FusionTablesLayer({ 
     map: map, 
     heatmap: { enabled: false }, 
     query: { 
      select: locationColumn, 
      from: tableId 
     }, 
     options: { 
     styleId: 3, 
     templateId: 3 
     } 
    }); 
      layer . setMap (map); 

      google.maps.event.addDomListener(document.getElementById('Query'), 
      'change', function() { 
       updateMap(layer, tableId, locationColumn); 
     }); 
    } 
    // Update the query sent to the Fusion Table Layer based on 
     // the user selection in the select menu 
     function updateMap(layer, tableId, locationColumn) { 
     var query = document.getElementById('Query').value; 
     if (query) { 
      layer.setOptions({ 
      query: { 
       select: locationColumn, 
       from: tableId, 
       where: "Query = '" + query + "'" 
      } 
      }); 
      panToMarker(Query, tableId, locationColumn); 
     } else { 
      layer.setOptions({ 
      query: { 
       select: locationColumn, 
       from: tableId 
      } 
      }); 
     } 

     } 

     function panToMarker(Query, tableId, locationColumn) { 
    var queryStr = "SELECT "+locationColumn+" FROM "+tableId+" WHERE Query = "+Query+";"; 
    document.getElementById('query').innerHTML = queryStr; 
    var queryText = encodeURIComponent(queryStr); 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 

    query.send(panTo); 
    } 

    function panTo(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 geoXml = new geoXML3.parser(); 
     var kml = FTresponse.getDataTable().getValue(0,0); 
     geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>"); 
     geoXml.docs[0].markers[0].setMap(null); 
     map.setCenter(geoXml.docs[0].markers[0].getPosition()); 
     if (map.getZoom() < 10) map.setZoom(10); 
    } 


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




</script> 
</head> 
    <body> 
    <div id="wrapper"> 



<table> 
<tr> 
<td> 
<div id="menu" style="background-color:#EFE0B9;height:500px;width:150px;float:left;"> 


<label><b>Select:</b></label> 
    <select id="Query"> 
<option value="Bishop Creek">Bishop Creek</option> 
<option value="Blue Spring">Blue Spring</option> 
<option value="Blue Wash">Blue Wash</option> 
<option value="Bronco Creek">Bronco Creek</option> 
<option value="Camp Creek">Camp Creek</option> 
<option value="Cave Creek">Cave Creek</option> 
<option value="Columbine Spring">Columbine Spring</option> 
<option value="Copper Creek">Copper Creek</option> 
<option value="Cottonwood Creek">Cottonwood Creek</option> 
<option value="Davenport Wash">Davenport Wash</option> 
<option value="Deadman Creek">Deadman Creek</option> 
<option value="Grapevine Canyon">Grapevine Canyon</option> 
<option value="Holmes Canyon">Holmes Canyon</option> 
<option value="Horse Creek">Horse Creek</option> 
<option value="Jacks Gulch">Jacks Gulch</option> 
<option value="Lime Creek upper">Lime Creek upper</option> 
<option value="Lime Creek lower">Lime Creek lower</option> 
<option value="Mud Spring">Mud Spring</option> 
<option value="New River">New River</option> 
<option value="Rackensack Canyon">Rackensack Canyon</option> 
<option value="Red Creek">Red Creek</option> 
<option value="Red Creek Middle">Red Creek Middle</option> 
<option value="Round Tree Canyon">Round Tree Canyon</option> 
<option value="Seven Springs">Seven Springs</option> 
<option value="Silver Creek">Silver Creek</option> 
<option value="Sheep Creek">Sheep Creek</option> 
<option value="Squaw Creek">Squaw Creek</option> 
<option value="Sycamore Creek">Sycamore Creek</option> 
<option value="Sycamore Creek HK Ranch">Sycamore Creek HK Ranch</option> 
<option value="Tangle Creek">Tangle Creek</option> 
<option value="Two Mile Spring">Two Mile Spring</option> 
<option value="Verde River">Verde River</option> 
<option value="Walnut Spring">Walnut Spring</option> 
<option value="Wet Bottom Creek">Wet Bottom Creek</option> 
    </select> 
    <br><br><br><br><br><br><br> 

</td> 
<td> 
    <div id="googft-mapCanvas" style="width:700px; height:600px;"> 
</td> 


</div> 
</body> 
</html>

Я понятия не имею, что я делаю неправильно, я был бы очень признателен, если кто-то может мне точку в правильном направлении !! = D

источник

2013-07-31 user2638460

первый шаг - посмотреть на яваскрипта ошибки браузера сообщает: Ошибка: запрос не задан – geocodezip

код пытается использовать запрос GViz, но это API, не входит. Добавить:

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

код пытается разобрать KML из колонки Lat, но это не KML, это место 2 колонки. Удалить:

var geoXml = new geoXML3.parser(); 
var kml = FTresponse.getDataTable().getValue(0,0); 
geoXml.parseKmlString("<Placemark>"+kml+"</Placemark>"); 
geoXml.docs[0].markers[0].setMap(null); 
map.setCenter(geoXml.docs[0].markers[0].getPosition()); 
if (map.getZoom() < 10) map.setZoom(10);

Заменить, что с:

var bounds = new google.maps.LatLngBounds(); 
    for (var i=0; i<numRows; i++) { 
     var lat = FTresponse.getDataTable().getValue(i,0); 
     var lng = FTresponse.getDataTable().getValue(i,1); 
     var point = new google.maps.LatLng(lat,lng); 
     bounds.extend(point); 
    } 
    if (numRows == 1) map.setCenter(point); 
    else map.fitBounds(bounds); 
    if (map.getZoom() < 10) map.setZoom(10);

Изменить ваш GViz запрос на:

var queryStr = "SELECT Lat,Long FROM "+tableId+" WHERE Query = '"+Query+"';";

working example

источник

2013-07-31 16:01:09 geocodezip

Большое вам спасибо! Работает именно так, как я хотел, я очень ценю вашу помощь. – user2638460

Fusion Table layer dropdown query pan и zoom не работает

ответ

Смежные вопросы