hi i want to display map as
1)when i click on the state,that states details should be shown in another
window in pie and column chart formatted.( i already do my map and
pie,column chart work individually)
2) i want call my chart file in map
how can i do that,kindly help me ASAP
*code for map:*
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:800px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false";>
</script>
<script type="text/javascript">
var map;
var layerl0;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(21.7679,78.8718),
zoom: 5
});
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' }
]
}
];
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
layerl0 = new google.maps.FusionTablesLayer({
query: {
select: "'geometry'",
from: '4070871'
},
map: map
});
}
function changeMapl0() {
var searchString =
document.getElementById('search-string-l0').value.replace(/'/g, "\\'");
layerl0.setOptions({
query: {
select: "'geometry'",
from: 4070871,
where: "'Type' = '" + searchString + "'"
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div style="margin-top: 10px;">
<label>Sector</label>
<select id="search-string-l0" onchange="changeMapl0(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>
</body>
</html>
*code for pie & column chart:*
<!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>sezs in india</title>
<script type="text/javascript"
src="http://www.google.com/jsapi";></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(init);
function init() {
drawChart('Andhra Pradesh');
}
function drawChart(state) {
var queryP = new
google.visualization.Query('https://docs.google.com/spreadsheet/ccc?key=0ArFGfpB6duBGdFpSa2s0TEliUlVBVWdDbEs2N0ttNnc#gid=0');
queryP.setQuery('SELECT * WHERE A = "' + state + '"'); // column A is
State
queryP.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var baseData = response.getDataTable();
var dataP = new google.visualization.DataTable();
dataP.addColumn('string', baseData.getColumnLabel(0));
dataP.addColumn('number', 'Value');
for (var i = 1; i < baseData.getNumberOfColumns(); i++) {
dataP.addRow([baseData.getColumnLabel(i), baseData.getValue(0, i)]);
}
var chart1 = new
google.visualization.PieChart(document.getElementById('pie_div'));
chart1.draw(dataP, {
title: baseData.getValue(0, 0),'is3D': true
});
var chart = new
google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(dataP, {'isStacked': true, 'legend': 'bottom'});
}
</script>
</head>
<body>
<table >
<tr>
<td>
<div id="chart_div" style="align: center; width: 700px; height:
400px;"></div>
</td>
<td>
<div id="pie_div" style="align: center; width: 700px; height: 300px;"></div>
</td>
</tr>
</table>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Maps API V2" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-maps-api/-/1IM01K08BlYJ.
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-maps-api?hl=en.
