Accessing individual cell value from Google Fusion Tables on Click event
HTML
<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.css" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBJj_v-VYk6V7vzOIlIj88DiteiuMfpdN4&sensor=false®ion=us"></script>
<div id="map_container">
<div id="map_data">
<h2>If suppressInfoWindows set to true, data will appear here.</h2>
</div>
<div id="map_canvas"></div>
</div>
CSS
#map_container {width: 620px; height: 800px; margin: 25px auto;}
#map_data {width: 620px; height: 50px; margin: 25px auto;}
#map_canvas {width: 620px; height: 600px; margin: 25px auto;}
JavaScript
var jqueryNoConflict = jQuery;
//begin main function
jqueryNoConflict(document).ready(function(){
createMap();
});
// begin function
function createMap() {
var locationColumn = 'geocode_address';
var tableID = '1Zyd01azLsZrT9LB___7T4DO_P8GQ7Tga-930TKjl';
var map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new
google.maps.LatLng(34.16589048389459-118.2683405195312),
zoom: 8,
scrollwheel: false,
draggable: true,
mapTypeControl: false,
navigationControl: true,
streetViewControl: false,
panControl: false,
scaleControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP}
});
// Initialize ft layer
var layer = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col5",
from: "1Zyd01azLsZrT9LB___7T4DO_P8GQ7Tga-930TKjl",
where: ""
},
options: {
styleId: 2,
templateId: 3
}
});
};
// end function