Introduction: Google Maps API is a collection of APIs that enable you to overlay your own data on a customized Google Map. Google Fusion Tables allow you to upload, store, share, search, and manage large structured data sets in the cloud. It can store up to 100 MB of data per table, and each row in a table can have an associated location, line, or polygon feature.
The Google Maps API provides a FusionTablesLayer object that connects to these Fusion Tables and can automatically render the location data in a Fusion Table as well as display additional information about each feature through clickable overlay.
Fusion Tables also supports an SQL like query language, which you can use to filter the features shown on a map. The combination of Fusion Tables with the Maps API makes it easy to host large sets of data in the cloud, and visualize them in your Maps API application.
Steps to load data in Fusion Table and display data in Google Map:
(1) Get Sample Data: There are several formats of data can be used. I am using comma separated value (.csv) file. Any kind of data with address information can be used. My file contains addresses of Hospitals in Illinois.
(2) Log on to Google Fusion Table: Open a browser and go to http://www.google.com/fusiontables. If you have Google Account,
use that to log on. If you don't have a Google account then you'll have to create a new account.
(3) Import Data: Once you logged in, you will see the “import New Table” screen. Select “From this Computer” and browse to select a data file from your machine. Click “next” button.
(4) Preview uploaded data: Your data will start to be uploaded. Click “Next” button.
(5) Set up Description: You can set up table description from final import screen. Click “Finish”.
(6) Check Translated data : When the import has been finished, the rows which have been translated into map location will be highlighted with yellow.
Here is the code:
<iframe width="500" height="300" scrolling="yes" frameborder="no" src="https://www.google.com/fusiontables/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3%2C+col4%2C+col5%2C+col6+from+1RWovO01nPAv7UFqUjUzSVqhokdTHdMhZAMLupDk&containerId=gviz_canvas"></iframe>
(8) Visualize data in map: Click the tab –‘Map of Hospital name’. The next screen will show the ‘Geocoding’ on progress status and when it is finished you will see Illinois map with the hospitals marked as red circles
(9) Visualize data using Google Map API and Fusion Table Layer:
You can also add data from fusion table to your application using Google Map API. You need the unique identifier for the fusion table.
Here is the sample code in javascript:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Fusion Tables Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: chicago,
zoom: 11,
mapTypeId: 'roadmap'
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1RWovO01nPAv7UFqUjUzSVqhokdTHdMhZAMLupDk'
}
});
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
The ‘query’ property of fusionTableLayerOptions object is ‘SQL’ query. The select statement queries the ‘location’ field from ‘1RWovO01nPAv7UFqUjUzSVqhokdTHdMhZAMLupDk' which is the identifier of my fusion table.
Save this code as .html and open it in a browser to see the hospitals.It opens ‘Infoview window’ and displays stored information about the hospital when you click any hospital marker.
