app/views/questions/voter_map.html.erb

<html>
<head>
  <%- if @total > 0 %>
  <%= stylesheet_link_tag 'screen' %>
  <script type='text/javascript' src='http://www.google.com/jsapi'></script>
  <script type='text/javascript'>
   google.load('visualization', '1', {'packages': ['geomap']});
   google.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = new google.visualization.DataTable();
      data.addRows(<%= @votes_by_geoloc.size %>);
      data.addColumn('number', 'LATITUDE', 'Latitude');
      data.addColumn('number', 'LONGITUDE', 'Longitude');
      data.addColumn('number', '<%=@object_type.titleize%>', '<%=@object_type.titleize%>');
      data.addColumn('string', 'HOVER', 'City');
      <% count =0 -%>
      <%- @votes_by_geoloc.each do |city_state_string, hash| -%>
        <%- if city_state_string != "Unknown Location" -%>
         data.setValue(<%=count%>, 0, <%= hash[:lat] %>);
         data.setValue(<%=count%>, 1, <%= hash[:lng] %>);
         data.setValue(<%=count%>, 2, <%= hash[:num_votes] %> );
         data.setValue(<%=count%>, 3, "<%= city_state_string %>");
         <% count = count +1 %>
        <%- end -%>
      <%- end -%>

      var options = {};
      options['region'] = 'world';
      options['colors'] = [0x83DCFF, 0x258CB5]; //orange colors
      options['dataMode'] = 'markers';
      options['width'] = '746px';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };
  
  </script>
  <%- end %>
</head>

<body style='margin:0pt; padding:0pt;'>
	<div id='map_canvas' style='position:relative;' ></div>
	<%= "#{t('results.overall_total_votes', :count => @total)}." %>
<% if @votes_by_geoloc['Unknown Location'] -%>
	<%= t('results.unable_to_find_location_of_X_votes', :count => @votes_by_geoloc['Unknown Location'][:num_votes]) %>
<% end -%>
</body>

</html>