0

22 個のマーカーを持つフュージョン テーブル レイヤーをプルしています。(以前は、私のマップは 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);

編集: 私の JavaScript エラーを調べるように geocodezip が提案した後、コードを修正しました。マップは機能するようになりましたが、マーカーをクリックしてもまだ表示されません。

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);

}
4

1 に答える 1

0

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);

実施例

于 2013-07-23T17:44:47.343 に答える