hi i'm trying to draw a map and table but i dont know were im doing mistake
please correct me
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:800px; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi";></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false";></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js";></script>
<script type="text/javascript">
var map;
var layer10;
var tableid = 4070871;
var style = [
{
featureType: 'road.highway',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.arterial',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.local',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.country',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.locality',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.neighborhood',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'all',
stylers: [
{ visibility: 'on' }
]
},
{
featureType: 'poi',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'transit',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
];
google.load('visualization', '1', {'packages':['table']});
function drawMap() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(21.7679,78.8718),
zoom: 5
});
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layer10 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: '4070871'
},
map: map
});
}
function drawTable(){
var query = "SELECT FROM '4070871'";
var data = document.getElementById('data').value;
if(data){
query += " WHERE 'geometry' = '" + data + "'";
}
var queryText = encodeURIComponent(query);
var gvizQuery = new
google.visualization.Query('https://www.google.com/fusiontables/DataSource?docid=1lQUsmOT4jO3tlaE9xIXu1A6mX-wbhxk8Eari1MI&pli=1'
+ queryText);
gvizQuery.send(function(response){
var table = new
google.visualization.Table(document.getElementById('table_id'));
table.draw(response.getDataTable(),{showRowNumber: true});
});
}
}
function changeMap10() {
var searchString =
document.getElementById('search-string-10').value.replace(/'/g, "\\'");
layer10.setOptions({
query: {
select: "'geometry'",
from: 4070871,
where: "'Type' = '" + searchString + "'"
}
});
}
function drawVisualization(){
drawMap();
drawTable();
}
google.maps.event.addDomListener(window, 'load', drawVisualization);
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Sector</label>
<select id="search-string-10" onchange="ChangeMap10(this.value);">
<option value="">--Sector--</option>
<option value="Formally Approved">Formally Approved</option>
<option value="In-Principle Approved">In-Principle Approved</option>
<option value="Operational">Operational</option>
<option value="in-Principle Approved">in-Principle Approved</option>
</select>
</div>
<div id="table_id"></div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/P0V5K7z__acJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
