map.js.erb

var pinStyles = {
  'home': {
      url: "<%= asset_path('gpin-home@2x.png') %>",
      scaledSize: new google.maps.Size(144, 20),
      anchor: new google.maps.Point(10, 10)
  },

  'default': {
    url: "<%= asset_path('gpin-grey@2x.png') %>",
    scaledSize: new google.maps.Size(15, 15)
  }
};

var styles = [
  {
    stylers: [
      { visibility: "off" },
      { hue: "#ccc" },
      { saturation: -100 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "simplified" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape.man_made",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road.local",
    "elementType": "labels.icon",
    "stylers": [
      { "visibility": "off" }
    ]
  }
];

Map = {
  mapOptions: {
    zoom: 17,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.DEFAULT
    },
    scrollwheel: false,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: styles
  },

  marker: {
    min: [16, 16],
    max: [20, 20]
  },

  home: {
    min: [115, 16],
    max: [144, 20]
  },

  initialize: function(locations, home) {
    this.locations = locations;

    this.initialLatitude = parseFloat(home[1]) + 0.0015;
    this.initialLongitude = parseFloat(home[2]);

    this.mapOptions.center = {
      lat: this.initialLatitude,
      lng: this.initialLongitude
    },

    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) {
      return pinStyles[locations[x][6]] || pinStyles['default'];
    }

    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('<span>' + locations[i][0] + '</span><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));

    }

    google.maps.event.addListener(this.map, 'zoom_changed', this.resizeMarkers.bind(this));

    this.resizeMarkers()

    google.maps.event.addListener(this.map, 'center_changed', function() {
      var size = [
        this.getDiv().offsetWidth,
        this.getDiv().offsetHeight
      ].join('x');

      if (!this.get('size') || size === this.get('size')) {
         this.setValues({
           size: size,
           _center: this.getCenter()
         });
      } else {
        google.maps.event.addListenerOnce(this, 'idle', function(){
          this.setValues({
            size: size,
            center: this.get('_center')
          });
        });
      }
    });

    google.maps.event.trigger(this.map, 'center_changed', {});

    $('.places-column li').click(function() {
      var place    = $(this).attr('id'),
          map      = $('#map'),
          offset_y = map.offset().top - 55;

      $('body, html').animate({ 'scrollTop': offset_y });
      $('.places-column li').removeClass('current');
      $(this).addClass('current');

      self.openBalloon(place);
    });
  },

  resizeMarkers: function() {
    var zoom = Math.max(this.map.getZoom() - this.mapOptions.zoom, 0);

    for (var i = 0; i < this.locations.length; i++) {
      if (this.locations[i][6] === "home") {
        var kind = "home";
      } else {
        var kind = "marker";
      }

      var min = this[kind].min;
      var max = this[kind].max;

      var width = this.sizeFromZoom(min[0], max[0], zoom);
      var height = this.sizeFromZoom(min[1], max[1], zoom);

      var marker = this.locations[i][7];
      var size = new google.maps.Size(width, height);
      var icon = marker.getIcon().url;
      var image = {
        url: icon,
        scaledSize: size,
        anchor: new google.maps.Point(height / 2, height / 2)
      }

      marker.setIcon(image);
    }
  },

  sizeFromZoom: function(min, max, zoom) {
    return Math.min(max, Math.round(min * Math.pow(2, zoom)))
  },

  setMapForMarkers: function(category_slug) {
    for (var i = 0; i < this.locations.length; i++) {
      var map_to_use = (this.locations[i][6] == category_slug) || (this.locations[i][6] == 'home') ? this.map : null;
      this.locations[i][7].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[7];

      // 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('<span>' + locations[i][0] + '</span><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');
        });
      }
    }
  }
};