为什么我的 InfoBubble 没有加载 FusionTablesLayer？

Question

我正在绘制一个有22个标记的Fusion Table层。（以前，我的地图是从KML层中提取的；事实证明，Fusion Tables对我的组织来说会更好）。

一切都很顺利，直到我开始使用InfoBubble创建自定义窗口。我尽我所能重新创建我用来制作自定义信息窗口的代码（请参阅我以前的帖子：Maps API v3:New InfoWindow，with pixelOffset，w/data from KML。）

我知道infoBubble不是火箭科学，但我显然做错了什么。我如何让这个代码工作，并让它将FusionTables层中的信息拉入infoBubble？

谢谢！：）

function initialize() {
var styles = [   ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
    {name: "HEPAC"});
var mapOptions = { 
    zoom: 7,
    center: new google.maps.LatLng(46.69504, -67.69751),
    panControl: false,
    mapTypeControl: false,
    streetViewControl: false,
    noClear: true,
    zoomControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT },
            mapTypeControlOptions: {
            mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]}
    };                
google.maps.visualRefresh = true;  
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
// Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var layer = new google.maps.FusionTablesLayer({
    query: {
        select: 'Latitude',
        from: '18KH6atJ7EZMZS-xxXpebiRAoVuIa2fXmJCQC5IM',
      },
});
layer.setMap(map);
google.maps.event.addListener(layer, "click", function() {
    showInContentWindow();
});
function showInContentWindow(position, text)
var content= "<div class='networkwindow'>" + text +  "</div>";
var infoBubble = new InfoBubble({
    padding: 20px,
    arrowSize: 10,
    arrowPosition: 10,
    arrowStyle: 2
});
    infoBubble.open(map)
}    
google.maps.event.addDomListener(window, 'load', initialize);

编辑：在geocodezip建议查看我的JavaScript错误后，修改了代码。地图现在可以工作了，但我的标记仍然没有在点击时出现。

google.maps.event.addListener(layer, "click", function () {
showInContentWindow();
});
function showInContentWindow(text) {
    var content = "<div class='networkwindow'>" + text +  "</div>";
    var InfoBubble = new InfoBubble({
        content: content,
        padding: '20px',
        arrowSize: 10,
        arrowPosition: 10,
        arrowStyle: 2
    });
InfoBubble.open(map);
}

Answer 1

因为javascript中存在语法错误。一旦我修复了这些，这对我来说就有效了。

var map = null;
function initialize() {
  var styles = [   ]; // Styles removed to simplify code
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "HEPAC"});
  var mapOptions = { 
    zoom: 7,
    center: new google.maps.LatLng(46.69504, -67.69751),
    panControl: false,
    mapTypeControl: false,
    streetViewControl: false,
    noClear: true,
    zoomControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT },
            mapTypeControlOptions: {
            mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]}
    };                
  google.maps.visualRefresh = true;  
  map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
  // Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
  var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
  map.setOptions(opt);
  var layer = new google.maps.FusionTablesLayer({
    query: {
        select: 'Latitude',
        from: '18KH6atJ7EZMZS-xxXpebiRAoVuIa2fXmJCQC5IM',
      },
  });
  layer.setMap(map);
  google.maps.event.addListener(layer, "click", function() {
    showInContentWindow();
  });
}
function showInContentWindow(position, text) {
  var content= "<div class='networkwindow'>" + text +  "</div>";
  var infoBubble = new InfoBubble({
    padding: "20px",
    arrowSize: 10,
    arrowPosition: 10,
    arrowStyle: 2
  });
  infoBubble.open(map)
}    
google.maps.event.addDomListener(window, 'load', initialize);

工作示例