Example Info Window

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<div id="map_canvas"></div>

CSS

#map_canvas {width: 620px;height: 600px;}

JavaScript

var layer;
var latlng = new google.maps.LatLng(44.74648547505308, -89.84939737499997);
var zoom = 7;
var map;
var infowindow;
var infoWindowContent = '';
var coordinate;

$(document).ready(function() {

    // Initialize the map
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: latlng,
        zoom: zoom,
        scrollwheel: false,
        disableDragging: true,
        mapTypeControl: false,
        navigationControl: true,
        streetViewControl: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_TOP
        }
    });

    //set map, layer & suppress infowindow
    layer = new google.maps.FusionTablesLayer(1264600, {suppressInfoWindows: true});
    layer.setQuery("SELECT geometry FROM 1264600");
    layer.setMap(map);
    
    //click listener on layer
    google.maps.event.addListener(layer, 'click', function(e) {
    map.setZoom(7);
    if(infowindow) infowindow.close();
    else infowindow = new google.maps.InfoWindow();

        //create info window layer
        infoWindowContent = infowindow.setContent(
            '<h3>This comes from the Fusion Table: <br />' + e.row['NAMELSAD10'].value + '</h3>' +
            '<br />' +
            '<p>This is hardcoded to the script <br /> and will appear in each infowindow</p>');

        infowindow.setPosition(e.latLng);
        map.setCenter(e.latLng);
        infowindow.open(map);        
    });
});