1

Google Fusion マップを並べて作成しようとしていますが、うまく機能しているように見えますが、ポリゴンをクリックすると、情報ウィンドウが空白で表示されます。

残りのデータが表示されているように見えるときに、テーブルから情報を取得して表示しない理由を解明しようとしています。

地図はこちら: http://clairemiller.net/blaenaupop.html

表示するために使用しているコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<style>
 #map_canvas { width: 335px; height: 400px; float: left}
 #map_canvas2 { width: 335px; height: 400px; }
 #image {float: bottom}

body { margin: 0px}
p {color: white; font-family: arial;  font-size: 12px; margin: 0px; position: relative;         left: 4px; top: 3px  }
 #left { width: 335px; height: 20px; float: left; background-color: #007A8F}
 #right { width: 335px; height: 20px; float: left; background-color: #005F70}
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>

<script type="text/javascript">
var map;

var layer;
var layer2;
var secondMapMove = false;
var secondMapBounds = false;

function initialize() {

 map = new google.maps.Map(document.getElementById('map_canvas'), {
  center: new google.maps.LatLng(51.787578, -3.204393),
  zoom: 12,
  mapTypeId: 'roadmap'
});

var layer = new google.maps.FusionTablesLayer({
  center: new google.maps.LatLng(51.5021181, -3.17909),
  query: {
    select: 'geometry',
    from: '1F3SbppvMyF-3lcT5zrYS8S1X8JD1G2-0aQkWLPw',
 }
});
layer.setMap(map);

  map2 = new google.maps.Map(document.getElementById('map_canvas2'), {
   zoom: 12,
   mapTypeId: 'roadmap'
 });

var layer2 = new google.maps.FusionTablesLayer({
   center: new google.maps.LatLng(53.13359,-1.955566),
  query: {
    select: 'geometry',
    from: '1Hf9Z80JTCiq-zWwhhSPrbifO7q9dvA_DP_BN8IY',
 }
});
layer2.setMap(map2);

     google.maps.event.addListener(map,'zoom_changed',function(){
        if(secondMapBounds!=true) {
            var tmpZoom = map.getZoom();
            map2.setZoom(tmpZoom);  
        } else {
            secondMapBounds = false;
    }
 });
 google.maps.event.addListener(map2,'zoom_changed',function(){
    secondMapBounds = true;
    var tmpZoom1 = map2.getZoom();
    map.setZoom(tmpZoom1);
 });
 google.maps.event.addListener(map,'bounds_changed',function(){
    if(secondMapMove!=true) {
        var tmpBounds = map.getCenter();
        map2.setCenter(tmpBounds);
    } else {
        secondMapMove=false;
    }
 });
 google.maps.event.addListener(map2,'bounds_changed',function(){
    secondMapMove = true
    var tmpBounds2 = map2.getCenter();
    map.setCenter(tmpBounds2);
 });

}
</script>

</head>
<body onload="initialize();">

<div class="mapMap" id="map_canvas"></div>
<div class="mapMap" id="map_canvas2"></div>
</body>
</html>

2 つのテーブルの ID がそこにあり、情報ウィンドウはそれらにうまく表示されているようです。

情報ウィンドウが空白で表示される原因は何だったのだろうと思っています。

4

1 に答える 1

3

空白ではなく、白が表示されます。

infoWindows のコンテンツは -elements 内にあり<p/>、infoWindows の背景は白で、これが CSS です。

p {color: white;/*......*/}

色を変える

.googft-info-window p{color:#000;}
于 2013-01-28T22:23:16.447 に答える