Bubble Chart over Map

testing

by Toshi Takeuchi

HTML

<script src="https://www.google.com/jsapi"></script>
<h2>Concentration of students with special needs by school
</h2><div id="map"></div>

CSS

#map {
  width: 100%;
  height: 100%;
}

.label {
  position: relative;
  left: -50%;
  top: -8px;
  white-space: nowrap;
  color: white;
  font-family: Helvetica;
  font-size: 9pt;
  z-index: 1000;
  text-shadow: 1px 1px 10px #000;
}

JavaScript

var dataSourceUrl = "https://docs.google.com/spreadsheet/ccc?key=0Au4D8Alccn4xdHNJdXJmeTdYcEtpRXE1QXRucWtEN3c";
var onlyInfoWindow;

console.log(dataSourceUrl);

/*
google.load("visualization", "1");
google.load("maps", "3", {
  other_params: "sensor=false"
});

google.setOnLoadCallback(getData);

function getData() {
  var query = new google.visualization.Query(dataSourceUrl);
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();

  var mapping = {
    disableDefaultUI: false,
    scrollWheel: false,
    zoom: 13,
    center: new google.maps.LatLng(40.785611, -73.946056),
    mapTypeId: google.maps.MapTypeId.TERRAIN

  };

  var map = new google.maps.Map(document.getElementById("map"), mapping);

  var bubbleMap = new Bubble(data);

  bubbleMap.setMap(map);


  var mapStyles = [{
      featureType: "road",
      stylers: [{
        visibility: "on"
      }, {
        lightness: +20
      }, ]
    }

  ];

  map.setOptions({
    styles: mapStyles
  });

  var schoolDistricts = new google.maps.LatLng(41.850033, -87.6500523);

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '3621394'
    },
    styles: [{
      polygonOptions: {
        fillColor: "#FAFBFF",
        fillOpacity: 0
      }
    }]
  });

  layer.setMap(map);
}

var CustomTileLayer = new google.maps.ImageMapType({
  getTileUrl: function(coord, zoom) {
    return "http://tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
  },
  tileSize: new google.maps.Size(256, 256),
  isPng: true
});

map.overlayMapTypes.push(CustomTileLayer);

var input = document.getElementById('search');
mapCanvas.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var options = {
  types:...