CODEWITHSUNDEEP
htmlgoogle-mapsgoogle-maps-api-3google-fusion-tables
user2019744
user2019744

Reputation: 13

Info window showing empty / blank on Google Fusion Map layers

I'm trying to make a side by side Google Fusion Map and while that seems to be working OK, when I click on a polygon, the info window shows up as blank.

I'm trying to work out why it might not be picking up and displaying the information from the table, when the rest of the data seems to be showing up.

The map is here: http://clairemiller.net/blaenaupop.html

The code I'm using to display that is:

<!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>

The IDs for the two tables are in there, the infowindow appears to be showing up fine on them.

I'm wondering what I've missed that is causing the infowindows to show up blank.

Upvotes: 1

Views: 979

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

It doesn't show blank, it shows white.

The contents of the infoWindows are inside <p/>-elements, the background of the infoWindows is white, and this is your CSS:

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

change the color

.googft-info-window p{color:#000;}

Upvotes: 3

Related Questions