You can link the webpage with the pie chart to markers via iframe. Olha
Sent from my iPhone On Jun 22, 2012, at 4:59, SK <[email protected]> wrote: > 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. -- You received this message because you are subscribed to the Google Groups "Google Maps API V2" group. 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.
