爲什麼我的InfoBubble不支持FusionTablesLayer？

Question

我在拉一個有22個標記的Fusion Table圖層。 （之前，我的地圖是從KML層中提取的;事實證明，Fusion Tables對我的組織會更好）。

一切工作正常，直到我開始使用InfoBubble來創建自定義窗口。我盡我所能重新創建了用於創建自定義infoWindows的代碼（請參閱我以前的帖子：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); 

working example