google-maps-api-3google-fusion-tablesinfobubble

Why isn't my InfoBubble loading FusionTablesLayer?


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

}

Solution

  • 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