google_map.js

var styles = [
  {
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "on" },
      { "color": "#c3cdc5" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "color": "#eff9fe" }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    "featureType": "landscape.man_made",
    "elementType": "geometry",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];


Map = {
  initialize: function (locations) {
    this.locations = locations;

    this.mapOptions = {
      zoom: 15,
      zoomControl: true,
      zoomControlOptions: {
        style: google.maps.ZoomControlStyle.DEFAULT
      },
      scrollwheel: false,
      center: { lng: -73.962821, lat: 40.715316 },
      disableDefaultUI: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: styles
    };

    this.map = new google.maps.Map(document.getElementById('map-canvas'), this.mapOptions);
    this.infowindow = new google.maps.InfoWindow();


    google.maps.event.addListener(this.infowindow, 'closeclick', function() {
       $('.places-column li').removeClass('current');
    });

    function pinImage(x) {
      var pin = {};
      if (locations[x][4] == 'Home') {
        pin = {
          url: "<%= asset_path('g-pin-home-with-label.png') %>",
          scaledSize: new google.maps.Size(50, 40),
          anchor: new google.maps.Point(42, 25)
        }
      } else if (locations[x][4] == 'Food') {
        pin = {
          url: "<%= asset_path('g-pin-red.png') %>",
          scaledSize: new google.maps.Size(14, 14)
        }
      } else if (locations[x][4] == 'Culture') {
        pin = {
          url: "<%= asset_path('g-pin-brown.png') %>",
          scaledSize: new google.maps.Size(14, 14)
        }
      } else {
        pin = {
          url: "<%= asset_path('g-pin-black.png') %>",
          scaledSize: new google.maps.Size(14, 14)
        }
      }
      return pin;
    }

    var marker, i;

    var self = this;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: this.map,
        icon: pinImage(i)
      });

      locations[i].push(marker);

      google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function() {
          var parts = [];

          parts.push("<div id='scrollbar_container'>");
          parts.push("<div id='scrollbar_content'>");
          parts.push(locations[i][0] + '<br />' + locations[i][3]);
          parts.push("</div>");

          newContent = parts.join('');

          self.infowindow.setContent(newContent);
          self.infowindow.open(self.map, marker);

          google.maps.event.addListener(self.infowindow, 'domready', function () {
            var container = $('scrollbar_container');
            // new Control.ScrollBar('scrollbar_content','scrollbar_track');
          });
        }
      })(marker, i));

    }

//    $(window).on('hashchange', function() {
//      self.openBalloonFromHash();
//    });

//    this.openBalloonFromHash();

    $('.places-column li').click(function() {
      var place = $(this).attr('id');
      $('.places-column li').removeClass('current');
      $(this).addClass('current');
      self.openBalloon(place);
    });

    $('.categories li').click(function() {
      var target   = $(this).data('target'),
          category = $(this).html();

      $('.category-places').hide();
      $(target).show();
      self.setMapForMarkers(category)
    });
  },

  setMapForMarkers: function(category) {
    for (var i = 0; i < this.locations.length; i++) {
      var map_to_use = (this.locations[i][4] == category) || (this.locations[i][4] == 'Home') ? this.map : null;
      this.locations[i][6].setMap(map_to_use);
    }
  },

  openBalloonFromHash: function() {

    if (window.location.hash) {
      this.openBalloon(window.location.hash);
    }
  },

  openBalloon: function(hash) {
    var locationName = hash.replace('#', '');
    var locations = this.locations;

    for (var i = 0; i < locations.length; i++) {

      var loc = locations[i];
      var marker = loc[6];

      // Set current_location
      var current_location = loc[5];

      // Check for match between hash and location
      // and pop up a balloon if they do
      if (locationName === current_location) {
        var parts = [];
        var newContent = '';

        parts.push("<div id='scrollbar_container'>");
        parts.push("<div id='scrollbar_content'>");
        parts.push(locations[i][0] + '<br />' + locations[i][3]);
        parts.push("</div>");

        newContent = parts.join('');
        this.infowindow.setContent(newContent);
        this.infowindow.open(this.map, marker);

        google.maps.event.addListener(this.infowindow, 'domready', function() {
          var container = $('scrollbar_container');
        });
      }
    }
  }
};

index.html

<html>
  <head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_API_KEY'] %>&sensor=false"></script>
  </head>
  <body>
    <div class="map" style="background: #fff;">
      <div id="map-canvas" style="width: 100%; height: 500px;"></div>
    </div>

    // add jquery and google_map.js here
    
    <script type="text/javascript">
      $(function() {
        var home   = <%= raw(Place.home_pin) %>,
            places = <%= raw(Place.grouped_places) %>;
  
        if (places.length > 0 && home.length > 0) {
          new GoogleMap($('.map'), places, home);
        }
      });
    </script>
  </body>
</html>

place.rb

class Place < ActiveRecord::Base

  def set_lat_long
    google_url = "http://maps.googleapis.com/maps/api/geocode/json?address=#{CGI.escape(address_zip)}&sensor=false"
    google_result = open(google_url).read
    parsed_json = ActiveSupport::JSON.decode(google_result)

    if parsed_json['status'] == 'OK'
      self.lat = parsed_json['results'][0]['geometry']['location']['lat'].to_f
      self.long = parsed_json['results'][0]['geometry']['location']['lng'].to_f
    end
  end
end

Here's the data structure:

[place.name, place.lat, place.long, place.address, place.category, place.slug, place.category.parameterize]