как решить несовместимость между разными скриптами?

Question

Я пытаюсь разработать страницу, используя разные сценарии, такие как автозаполнение google places, запрос с флажками (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); 

Answer 1

есть два вызова initialize:

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

удалить одну из них ,