Map in dashboard with longitude and latitude in google spreadsheet

[Tienen]

Hi,

I would like to add in a dashboard a map where the coordonates are
available in google spreadsheet. I've tried the following code, but
it does not work.

<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls',
'corechart', 'table','map']});
</script>
<script type="text/javascript">
var visualization;

function drawVisualization() {
// Prepare the data
var query = new google.visualization.Query('https://
docs.google.com/spreadsheet/ccc?
key=0At7FLhuT06-0dDdWaWpkakI2ZjJybjFDWVJ4TFNUQXc&hl=en_GB#gid=0');
query.setQuery('SELECT
A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,AA,AB,AC,AD');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var CityPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'City',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
'state': {'selectedValues': ['Monaco']}
});
var CountryPicker = new
google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Country',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
'state': {'selectedValues': ['Monaco']}
});
var table1 = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table1',
'options': {
'width': '920px',
'height': 53
}, 'view': {'columns': [0,18,1,15,16,17] ,'rows': [0] }
});
var line1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart6',
'options': {
'width': 475,
'height': 220,
'legend': 'none',
'pointSize': 7,
'title': 'Number of movements',
'chartArea': {'left': 100, 'top': 30,
'width':'60%','height':'70%'},
'vAxis': {'minValue': 0}
},
'view': {'columns': [2,14],'rows': [0,1,2] }
});
// Define a map
var geodata = response.getDataTable();
datalat = geodata.getValue(1, 19); // Latitude of the
succursale
datalon = geodata.getValue(1, 20); // Longitude of the
succursale
var map1 = new
google.visualization.Map(document.getElementById('map1'));
//map1.setCenter(new GLatLng(datalat, datalon), 13);

new
google.visualization.Dashboard(document.getElementById('dashboard')).
// Establish bindings, declaring the both the slider and
the category
// picker will drive both charts.
bind(CountryPicker, CityPicker).
bind([CityPicker], [table1, line1, map1]).
// Draw the entire dashboard.
draw(data);
draw(geodata);
}
google.setOnLoadCallback(drawVisualization)

thanks,

[Riccardo Govoni ☢]

Hi there,

please have a look at this sample code I created from your own : https://gist.github.com/1210987

The only things I fixed to make it work was to wrap the Map visualization in a ChartWrapper ( as the Dashboard API requires ) and remove the double call to dashboard.draw() that was present in your code (which just generates a syntax error, since the second call is not attached to any object).

If you try it, you should see a dashboard containing a Map visualization that shows map markers only for the points that the dashboard filters allow.

-- R.

P.s. : I'm not sure what your commented line for map1.setCenter() was supposed to do, since the map auto-centers itself based on the set of locations currently shown.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Tienen]

Hi,

it is exactly what I need, thanks a lot!

An additional question, is it possible to add options (by example,
zoom=13) to the map?
Here the code:

// Define a map
var map1 = new google.visualization.ChartWrapper({
'chartType': 'Map',
'containerId': 'map1',
'options': {
'width': '300px',
'height': 300,
'zoom':13
},
'view': { 'columns': [19, 20]}
});

regards,

On Sep 12, 12:42 pm, Riccardo Govoni ☢ <battleho...@gmail.com> wrote:
> Hi there,
> please have a look at this sample code I created from your own :https://gist.github.com/1210987
>
> The only things I fixed to make it work was to wrap the Map visualization in
> a ChartWrapper ( as the Dashboard API requires ) and remove the double call
> to dashboard.draw() that was present in your code (which just generates a
> syntax error, since the second call is not attached to any object).
>
> If you try it, you should see a dashboard containing a Map visualization
> that shows map markers only for the points that the dashboard filters allow.
>
> -- R.
> P.s. : I'm not sure what your commented line for map1.setCenter() was
> supposed to do, since the map auto-centers itself based on the set of
> locations currently shown.
>

[Riccardo Govoni ☢]

Yes, you can pass any options that the Map visualization supports. For example:

     var map1 = new google.visualization.ChartWrapper({

        'chartType': 'Map',

        'containerId': 'map1',

        'options': {

mapType: 'normal',

zoomLevel: 5

},

        'view': { 'columns': [19, 20]}

    });

However, for some reason I haven't yet figured out, the map seems to use the specified zoomLevel only after the first redraw (read, after you interacted with the controls at least once) and not immediately from the start.

-- R.