paulusm/gist:8578438

## gistfile1.js
<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
          <style type="text/css">
		html { height: 100% }
            	body { height: 100%; margin: 0; padding: 0 }
	        #map-canvas { height: 100% }
	</style>
  <!--Calling in the api code with your own key -->
	<script type="text/javascript"  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNpI-93FtZH-5H4M6vvFGLhwSwVSNC1Tk&sensor=false">
          </script>
     <script type="text/javascript">
      function initialize() {
              //Where do we want the map to centre and the zoom level
             var mapOptions = {
                center: new google.maps.LatLng(51.4527, -2.5949),
		            zoom: 12
          };
            //Associate the map with the DOM element
            var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

      //Pulling in the polygon layer from Google Drive
	    var layer = new google.maps.FusionTablesLayer({
			        query: {
				      select: 'kml',
			  	      from: '1PAzi-MGBmuBMsdbKWGs-LkEHHlfAG7hjgBh7Zos'
				      },
              suppressInfoWindows:true
			  });
        layer.setMap(map);

        //Custom infowindow
        var infowindow = new google.maps.InfoWindow({
            content: "Hello",
            maxwidth: 200
        });

        google.maps.event.addListener(layer, 'click', function(e) {
                infowindow.setContent("<p><b>" + e.row.name.value + "</b></p>");
                infowindow.setPosition(e.latLng);
                infowindow.open(map);
                //console.log(e.row.name.value);
        });

        google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
            }

        google.maps.event.addDomListener(window, 'load', initialize);
          </script>
  </head>
<body>
	 <div id="map-canvas"/>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map-canvas { height: 100% }
	</style>
	<!--Calling in the api code with your own key -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNpI-93FtZH-5H4M6vvFGLhwSwVSNC1Tk&sensor=false">
	</script>
	<script type="text/javascript">
	function initialize() {
	//Where do we want the map to centre and the zoom level
	var mapOptions = {
	center: new google.maps.LatLng(51.4527, -2.5949),
	zoom: 12
	};
	//Associate the map with the DOM element
	var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

	//Pulling in the polygon layer from Google Drive
	var layer = new google.maps.FusionTablesLayer({
	query: {
	select: 'kml',
	from: '1PAzi-MGBmuBMsdbKWGs-LkEHHlfAG7hjgBh7Zos'
	},
	suppressInfoWindows:true
	});
	layer.setMap(map);

	//Custom infowindow
	var infowindow = new google.maps.InfoWindow({
	content: "Hello",
	maxwidth: 200
	});

	google.maps.event.addListener(layer, 'click', function(e) {
	infowindow.setContent("<p><b>" + e.row.name.value + "</b></p>");
	infowindow.setPosition(e.latLng);
	infowindow.open(map);
	//console.log(e.row.name.value);
	});

	google.maps.event.addListener(map, 'click', function() {
	infowindow.close();
	});
	}

	google.maps.event.addDomListener(window, 'load', initialize);
	</script>
	</head>
	<body>
	<div id="map-canvas"/>
	</body>
	</html>