Google has now stopped its Earth API and Maps API is a paid for API nowadays. Some capabilities have also been either removed or changed. Therefore, I had to remove all examples of VizMap applications I had created. I didn’t remove the entire topic as I thought some of the code may still be useful with some modifications. 

javaScript: creating google visualization charts and tables

This relates to Data Driven Mapping applications and the Javascript HowTo section

Google Visualization tables and charts

All visualizations are created from the dataViews mentioned in Using Google Visualization DataViews.
Once these dataViews are created, displaying them is very simple. Here is an example, using ready baked dataViews,  of a chart
and a table
The output  of all this is  below – items 6 and 8 are being visualized Using Google Visualization DataViews  as the source data.

Notice also that we are looking for events on the table – this is because this application will change to another map marker if the data row selected is a different SpotID than the currently shown marker. getSelection() returns the curremtly selected row, and we can use getTableRowIndex() to find the original row of the source dataTable – (which won’t correspond to the row number in the dataView since it is filtered). From this we can figure out whether the record selected belongs to the same spot as the infowindow we are currently showing.

Tailoring table styles

In Tailoring Output you can read how to change the look and feel of the content of the info Windows.  You can also change the presentation of the visualizations through css classes
See Using css styles to tailor InfoWindows for how to permanently change these classes for your application
css classes

Google Visualization table options

are used like this:

Organzation charts

As well as bar charts, you can also specify organization charts, which would look like this

These are Google Vizualization Org Charts and the data rules are as per the API and are generated like this. Since I allow selection on this type of chart (meaning that you can select someone and it will jump to their home spot and data), I cannot use the same aggregrated table View visualization as is used for the imagebar chart. Aside from that I can use exactly the same event handler as is used for selecting from a normal table.

Even handler

As usual questions, feedback and comments are welcome at our forum. Now lets take a look at more javaScript snippets from this application