GoogleVisualr - Map


Overview

Displays a map using the Google Maps API with data values (coordinates or addresses) being displayed as points on the map.

Please refer to Google's documentation for details on Data Format and Configuration Options. However, Methods and Events are not implemented.

Important: Please specify the height and width of the div element explicitly.


Example


Code

In your controller, create the data_table object, set new columns, add row values, then instantiate the chart with configuration options.

  # http://code.google.com/apis/chart/interactive/docs/gallery/map.html
  def map

    data_table = GoogleVisualr::DataTable.new
    data_table.new_column('number', 'Lat' )
    data_table.new_column('number', 'Lon' )
    data_table.new_column('string', 'Name')
    data_table.add_rows(4)
    data_table.set_cell(0, 0, 37.4232   )
    data_table.set_cell(0, 1, -122.0853 )
    data_table.set_cell(0, 2, 'Work'      )
    data_table.set_cell(1, 0, 37.4289   )
    data_table.set_cell(1, 1, -122.1697 )
    data_table.set_cell(1, 2, 'University')
    data_table.set_cell(2, 0, 37.6153   )
    data_table.set_cell(2, 1, -122.3900 )
    data_table.set_cell(2, 2, 'Airport'   )
    data_table.set_cell(3, 0, 37.4422   )
    data_table.set_cell(3, 1, -122.1731 )
    data_table.set_cell(3, 2, 'Shopping'  )

    opts   = { :showTip => true }
    @chart = GoogleVisualr::Interactive::Map.new(data_table, opts)

  end

In your view, use the render_chart method to generate JavaScript, during rendering of the view.

  <!-- Specify the size of the Container element explicitly! -->
  <div id='chart' style="width: 400px; height: 300px;"></div>
  <%= render_chart @chart, 'chart' %>