Rendering a series of Google Maps within one View of a Rails app using JavaScript

I'm building a bus-tracking application using Ruby on Rails. It accepts a current location from the user and displays the closest buses using bus information collected from the API for the MARTA transit system in Atlanta.

I'm using a javascript file to render a separate map for each bus in a short list of the closest buses and to display the user's current location with one marker and the bus' location with another.

I originally coded the view with the JavaScript embedded within a pair of <script></script> tags, and had everything working as designed. I've since moved the JavaScript to its own file in the asset pipeline, and sent over the relevant variables from the view. Now my view is only rendering the final map in the list, and the rest of the map canvases render as empty boxes.

I'm a pretty new Stack Overflow user and I'm a little concerned that my question is insufficiently specific, but I'm pretty stuck and not sure where to go next. I sense there's something I don't quite understand about how Rails is handling my JavaScript file and the variables I send from the view, but I've hunted around the internet some and haven't found any relevant articles yet. I welcome suggestions on debugging techniques or references to external resources as opposed to folks just fixing the code for me.

That said, here's the line from my application.js.erb file that renders the map:

var map = new google.maps.Map(document.getElementById('map_canvas_' + busNum), mapOptions);

and you can view the full application.js.erb file here:

$(document).ready(function() {
  function initialize() {
    var currentLatLng = new google.maps.LatLng(currentLat, currentLng);
    var busLatLng = new google.maps.LatLng(busLat, busLng);

    var mapOptions = {
      center: currentLatLng,
      zoom: 14,
      scrollwheel: false
    };

    var map = new google.maps.Map(document.getElementById('map_canvas_' + busNum), mapOptions);

    var userMarker = new google.maps.Marker({
      position: currentLatLng,
      map: map,
      title: 'User',
      animation: google.maps.Animation.DROP
    });

    var imgSize = 30;

    var busIcon = {
      url: "<%= asset_path 'bus-marker.png' %>",
      scaledSize: new google.maps.Size(imgSize, imgSize * 1.5),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(imgSize * 1.5 / 2, imgSize)
    };

    var busMarker = new google.maps.Marker({
      position: busLatLng,
      map: map,
      title: 'Bus',
      icon: busIcon,
      animation: google.maps.Animation.BOUNCE
    });

    var current = 'You are here.';

    var userInfo = new google.maps.InfoWindow({
      content: current
    });

    var route = 'Bus number' + count + 'is on Route ' + busRoute + '. The next stop is at ' + busStop + '.';

    var busInfo = new google.maps.InfoWindow({
      content: route
    });

    google.maps.event.addListener(userMarker, 'click', function() {
      userInfo.open(map, userMarker);
    });

    google.maps.event.addListener(busMarker, 'click', function() {
      busInfo.open(map, busMarker);
    });
  };

  google.maps.event.addDomListener(window, 'load', initialize);
});

Here is the line from the view where I want to render that map:

<div class="well center-block bus-map" id="map_canvas_<%= bus["VEHICLE"] %>"></div>

and here is the loop that iterates through each item on the list of close buses:

<% @proximate_buses.each_with_index do |bus, index| %>
    <div class="col-md-6">
        <div class="panel">
            <div class="panel-header text-center">
                <h3>Route: <%= bus["ROUTE"] %></h3>
                <h3>Bus No: <%= bus["VEHICLE"] %></h3>
                <h3>Next Stop: <%= bus["TIMEPOINT"] %></h3>
            </div>
            <div class="panel-body">
                <%= javascript_tag do %>
                  var currentLat = '<%= j @location.latitude.to_s %>';
                  var currentLng = '<%= j @location.longitude.to_s %>';
                  var busLat = '<%= j bus["LATITUDE"].to_s %>';
                  var busLng = '<%= j bus["LONGITUDE"].to_s %>';
                  var busNum = '<%= j bus["VEHICLE"].to_s %>';
                  var busRoute = '<%= j bus["ROUTE"].to_s %>';
                  var busStop = '<%= j bus["TIMEPOINT"].to_s %>';
                  var count = '<%= j (index + 1).to_s %>';
                <% end %>

                <div class="well center-block bus-map" id="map_canvas_<%= bus["VEHICLE"] %>"></div>
            </div>
        </div>
    </div>
<% end %>

Any help is appreciated.