Google Maps получает kml от fusiontable и отображает их

Question

Я хочу построить что-то вроде this для Нидерландов. У меня есть название провинций, и вы щелкаете одним из них, и это должно громко его границы и отображать его, поэтому установите правильные границы. Вот мой код:

var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA"; 
var CountryName = "Netherlands"; 
google.load('visualization', '1', { 
    'packages': ['corechart', 'table', 'geomap'] 
}); 
jQuery(document).ready(function() { 
    var mapProp = { 
    center: new google.maps.LatLng(52.24730, 5.36449), 
    zoom: 7, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 

    jQuery("span").click(function() { 
    var name = jQuery(this).text(); 
    //map.fitBounds(gpolygons[id].bounds); 
    var queryStr = { 
     select: 'kml_4326', 
     from: FT_TableID, 
     where: "'name_0' = '" + CountryName + "' AND 'name_1' = '" + name + "'" 
    }; 
    var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryStr); 
    var FT_Options = { 
     suppressInfoWindows: true, 
     query: query 
    }; 
    layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options); 
    layer.setMap(map); 
    }); 

}); 

рабочего пример также на codepen: http://codepen.io/anon/pen/JXvXjb

Моей проблема: Он отображает границы и данные Kml всего во вьюпорте, а не только выбранная области. Что-то с неправильным запросом? Также я хочу, чтобы, как в примере с geocodezip, порт представления установлен в выбранную область. Для этого мне нужны данные boundsdata и установите его с bounds.extend() и map.fitBounds(bounds). Но откуда я могу получить эти данные?

Answer 1

Ваш FusionTableLayer не работает так, как вы ожидаете, потому что используете неправильный синтаксис («старый» синтаксис, а не синтаксис currently documented). «Старый» синтаксис не работает с зашифрованными идентификаторами. Если синтаксис запроса неверен, но вы даете ему действительную таблицу, он отображает все данные.

«Старый» Синтаксис:

layer = new google.maps.FusionTablesLayer(FT_TableID, FT_Options); 

Это (в настоящее время) задокументировано синтаксис:

var FT_Options = { 
    suppressInfoWindows: true, 
    query: { 
    select: 'kml_4326', 
    from: FT_TableID, 
    where: "'name_0' = '" + CountryName + "'" 
    }, 
    styles: [{ 
    polygonOptions: { 
     strokeColor: "#FF0000", 
     strokeWeight: 3 
    } 
    }] 
}; 
layer = new google.maps.FusionTablesLayer(FT_Options); 

У вас также есть проблемы с провинцией запросами (вы имена провинции написаны неправильно (или по крайней мере иначе, чем в таблице), поэтому запросы не соответствуют никаким строкам.

фрагмент кода:

var FT_TableID = "19lLpgsKdJRHL2O4fNmJ406ri9JtpIIk8a-AchA"; 
 
var CountryName = "Netherlands"; 
 
google.load('visualization', '1', { 
 
    'packages': ['corechart', 'table', 'geomap'] 
 
}); 
 
jQuery(document).ready(function() { 
 
    var mapProp = { 
 
    center: new google.maps.LatLng(52.24730, 5.36449), 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 
    var queryStr = { 
 
    select: 'kml_4326', 
 
    from: FT_TableID, 
 
    where: "'name_0' = '" + CountryName + "'" 
 
    }; 
 
    var FT_Options = { 
 
    suppressInfoWindows: true, 
 
    query: queryStr, 
 
    styles: [{ 
 
     polygonOptions: { 
 
     strokeColor: "#FF0000", 
 
     strokeWeight: 3 
 
     } 
 
    }] 
 
    }; 
 
    layer = new google.maps.FusionTablesLayer(FT_Options); 
 
    layer.setMap(map); 
 
    jQuery("span").click(function() { 
 
    var name = jQuery(this).text(); 
 
    var queryStr = { 
 
     select: 'kml_4326', 
 
     from: FT_TableID, 
 
     where: "'name_0' = '" + CountryName + "' AND 'name_1' = '" + name + "'" 
 
    }; 
 
    var FT_Options = { 
 
     query: queryStr, 
 
     styles: [{ 
 
     polygonOptions: { 
 
      strokeColor: "#FF0000", 
 
      strokeWeight: 3 
 
     } 
 
     }] 
 
    }; 
 
    layer.setOptions(FT_Options); 
 
    }); 
 
});

html, 
 
body, 
 
#googleMap { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://www.google.com/jsapi"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span>Zeeland</span> 
 
<span>Drenthe</span> 
 
<br> 
 
<div id="googleMap"></div>