index.html.erb

<script>
  var markers  = <%= @stops.results.map { |i| i['location'] }.to_json %>;
  var stop_ids = <%= @stops.results.map { |i| i['stop_id'].to_i }.to_json %>;
  var center   = {lat:<%= @lat %>, lon:<%= @lon %>};

  var HomeView = Backbone.View.extend({

    el: '.app-container',

    events: {
      "click #view-table-btn": "show_table",
      "click #view-map-btn": "show_map"
    },

    initialize: function() {
      this.viewchanger = this.$el.find('#viewchanger');
      this.views = this.$el.find('.views');
      this.view_table = this.$el.find('#view-table');
      this.view_map = this.$el.find('#view-map');
    },

    show_table: function(e) {
      this.viewchanger.find("li").removeClass("active");
      $(e.currentTarget).parent().addClass("active");

      this.views.hide();
      this.view_table.show();
    },

    show_map: function(e) {
      this.viewchanger.find("li").removeClass("active");
      $(e.currentTarget).parent().addClass("active");
      
      this.views.hide();
      this.view_map.show();

      initialize(center.lat, center.lon);
      add_markers(markers, stop_ids);
      initialize.ran=true;
      google.maps.event.trigger(map, "resize");
    }


  });

</script>