I'm not familiar enough with the Google Maps end of things to help with
that, but I can pseudo-code that part, and you can get help with the map
end from a better source (StackOverflow <http://stackoverflow.com> has a
lot of google maps people on it as I recall).
Basically, there are a few things you need to fix up in your code to make
the two play well together. The Visualization API loads asynchronously, so
you can't rely on it being ready when the body's "onload" event fires, you
need a specific callback handler for it:
[javascript]
function initialize() {
// code
}
google.load('visualization', '1', {packages: ['corechart'], callback:
initialize});
[HTML]
<body>
<div id="chart-canvas"><br> <!-- this br tag will be overwritten by the
chart -->
</div>
<div id="map-canvas">
</div>
</body>
In order for the chart and map to interact, they need to share a common
scope, which can be done by integrating them into a single function:
function initialize() {
var malaga = new google.maps.LatLng(36.721261,-4.4212655);
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: malaga,
zoom: 13
});
// there must be a better way to query this data than to have two
separate pulls
// at the very least, the two queries **must** return the same rows of
data in the same order
var layer = new google.maps.FusionTablesLayer({
query: {
select: "",
from: '1P_xBHR8RRndRON43IveLzU5SRwAjsmF4v0PWm2U',
where: ""
},
});
layer.setMap(map);
var chart = new google.visualization.ChartWrapper({
containerId: 'chart-canvas',
dataSourceUrl: 'http://www.google.com/fusiontables/gvizdata?tq=',
query: "SELECT GSI, FSI FROM
1P_xBHR8RRndRON43IveLzU5SRwAjsmF4v0PWm2U",
chartType: 'ScatterChart',
});
// pseudo-code for setting Map selection from chart
google.visualization.events.addListener(chart, 'click', function() {
var chartSelection = chart.getSelection();
// loop over selection to get selected elements
for (var i = 0; i < chartSelection.length; i++) {
// use selection[i].row (gives row index in data) to set the
selection in Map
}
});
// pseudo-code for setting chart selection from Map
function setChartSelection (mapSelection) {
var chartSelection = [];
// parse map selection into array of objects with "row" and
"column" properties
// corresponding to the appropriate row and column in the chart's
data
// eg:
chartSelection.push({row: mapSelection.row, column: 1}); // column
will always be 1 for this chart
chart.setSelection(chartSelection);
}
chart.draw();
}
On Sunday, December 29, 2013 6:00:44 AM UTC-5, Fernando Miguel Garcia
Martin wrote:
>
> I have a Google Fusion Table and I need to display together a Map with
> the polygons of the FT in a layer and, at the same time, a scatter Chart
> with two values of this polygons. But I'm falling (I'm a starter) getting
> that when a polygon is selected in the map it becomes selected also in the
> chart (and the other way around).
>
> This is my code... I'm lost in the
> 'google.visualization.events.addListener'.
>
> <script type="text/javascript"src="
> http://maps.google.com/maps/api/js?sensor=false";></script>
> <script type="text/javascript" src="http://www.google.com/jsapi";></script>
>
> <script type="text/javascript">
> google.load('visualization', '1', { packages: ['corechart'] });
>
> function initialize() {
> var malaga = new google.maps.LatLng(36.721261,-4.4212655);
> var map = new google.maps.Map(document.getElementById('map-canvas'), {
> center: malaga,
> zoom: 13
> });
>
> layer = new google.maps.FusionTablesLayer({
> query: {
> select: "",
> from: '1P_xBHR8RRndRON43IveLzU5SRwAjsmF4v0PWm2U',
> where: ""
> },
> });
> layer.setMap(map);
>
> drawVisualization();
> google.visualization.events.addListener(layer, 'click', function() {
> drawVisualization.setSelection(layer.getSelection());
> });
> }
>
> function drawVisualization() {
> google.visualization.drawChart({
> containerId: 'chart-canvas',
> dataSourceUrl: 'http://www.google.com/fusiontables/gvizdata?tq=',
> query: "SELECT GSI, FSI FROM 1P_xBHR8RRndRON43IveLzU5SRwAjsmF4v0PWm2U",
> chartType: 'ScatterChart',
> });
> }
>
> </script>
>
> </head>
> <body onload="initialize()">
> <div id="chart-canvas"><br>
> </div>
> <div id="map-canvas">
> </div>
> </body>
> </html>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
