Googleプレイスのオートコンプリート、チェックボックス付きのクエリ( https://developers.google.com/fusiontables/docs/samples/in )、場所のズーム( http://www .geocodezip.com/v3_FusionTables_GViz_zoom2MarkerA.html )。
問題は、オートコンプリートまたはチェックボックス + ズームは単独では正常に機能しますが、組み合わせるとすべてがうまくいかないということです!
コードの位置をずらして再組み立てしようとしましたが、うまくいかず、理由がわかりません。私はJavascriptの初心者なので、実際にテストして適応させています。
何か手がかりがあればよろしくお願いします！
チェックボックス + ズームを含むコード:
// Checkboxes
layer = new google.maps.FusionTablesLayer();
filterMap(layer, FT_TableID, map);
google.maps.event.addDomListener(document.getElementById('0'),
'click', function() {
filterMap(layer, FT_TableID, map);
});
google.maps.event.addDomListener(document.getElementById('1'),
'click', function() {
filterMap(layer, FT_TableID, map);
});
google.maps.event.addDomListener(document.getElementById('2'),
'click', function() {
filterMap(layer, FT_TableID, map);
});
google.maps.event.addDomListener(document.getElementById('3'),
'click', function() {
filterMap(layer, FT_TableID, map);
});
google.maps.event.addDomListener(document.getElementById('4'),
'click', function() {
filterMap(layer, FT_TableID, map);
});
}
// Filter the map based on checkbox selection.
function filterMap(layer, FT_TableID, map) {
var where = generateWhere();
if (where) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'Latitude',
from: FT_TableID,
where: where
}
});
} else {
layer.setMap(null);
}
}
// Generate a where clause from the checkboxes. If no boxes
// are checked, return an empty string.
function generateWhere() {
var filter = [];
var stores = document.getElementsByName('note');
for (var i = 0, note; note = stores[i]; i++) {
if (note.checked) {
var noteName = note.value.replace(/'/g, '\\\'');
filter.push("'" + noteName + "'");
}
}
var where = '';
if (filter.length) {
where = "'coeurs' IN (" + filter.join(',') + ')';
}
return where;
}
google.maps.event.addDomListener(window, 'load', initialize);
///// end of checkboxes part
//////// zoom
function changeQuery(term) {
layer.setOptions({query:{select:'Latitude', /* was 'Latitude,Longitude', used to work... */
from:FT_TableID,
where:"'Nom' contains ignoring case '"+term + "'"
//à la place de : where:"Nom 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 'Nom' contains '"+term+"'");
// does _not_ work var queryText = encodeURIComponent("SELECT 'Latitude' FROM "+FT_TableID+" WHERE District = "+term);
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + queryText);
//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 bounds2 = 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)));
bounds2.extend(point);
}
// zoom to the bounds
map.fitBounds(bounds2);
map.setZoom(18);
}
オートコンプリートに使用されるコード:
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(O, 0),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
}
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
google.maps.event.addDomListener(window, 'load', initialize);