Why isn't my InfoBubble loading FusionTablesLayer?

Question

I'm pulling a Fusion Table layer that has 22 markers. (Previously, my map pulled from a KML layer; turns out, Fusion Tables will be better for my organization).

Everything was working fine until I started mucking about with InfoBubble to create custom windows. I tried my best to recreate the code I used to make custom infoWindows (see my previous post: Maps API v3: New InfoWindow, with pixelOffset, w/ data from KML.).

I know infoBubble isn't rocket science, but I'm clearly doing something wrong. How do I get this code working, and have it pull the info from my FusionTables layer into the infoBubble?

THANK YOU! :)

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

EDIT: Revised code, after geocodezip's suggestion to take a look at my JavaScript errors. The map works now, but my markers still aren't appearing on click.

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

}

If you fix your javascript errors it works. [working example](http://www.geocodezip.com/v3_SO_FusionTables_InfoBox.html) — geocodezip, Jul 23 '13 at 17:39

score 0 · Accepted Answer · answered Jul 23 '13 at 17:44

0

Because you have syntax errors in your javascript. This works for me once I fixed those.

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

answered Jul 23 '13 at 17:44

geocodezip

158,664
13
220
245

Thank you! I've been working to clean up the JavaScript after seeing your last message (that's why there's an edit above). Much much appreciated. Love the opportunity to learn on this site. – SPS Jul 23 '13 at 18:10
Hey @geocodezip, why aren't the various options for the InfoBubble (e.g., padding, arrowSize, arrowPosition) loading? – SPS Jul 23 '13 at 18:16
Looks to me like you have 2 issues: 1. you are not suppressing the FusionTablesLayer native infowindow ({suppressInfoWindow: true}), 2. The call to showInContentWindow doesn't have any arguments, so "text" is null. – geocodezip Jul 23 '13 at 18:34
Funny: I added (suppressInfoWindows: true) and a window is still opening. Can you help me identify how to use the showInContentWindow properly, or is there a different call I should be using there? – SPS Jul 23 '13 at 18:41
Did you refresh the page? It is possible you were still running the old version from the cache, changing that breaks it for me. You will need to fix showInContentWindow yourself (or at least make a reasonable try at it). – geocodezip Jul 23 '13 at 18:50
Fixed my example (just needed to pass in the correct arguments. – geocodezip Jul 23 '13 at 18:58
AMAZING! Thanks. I had literally given up 10 minutes ago, but checked this post just in case. Can I buy you a beer? – SPS Jul 23 '13 at 20:06

Why isn't my InfoBubble loading FusionTablesLayer?

1 Answers1