title: Rails 4: Google Maps not displaying
body: <p>I'm trying to display a simple Google Map on my Rails 4 app.
  I chose to include the code statically for now until I get it to work.
  In my _head.html.erb partial, I have:</p>
  
  <pre><code>&lt;head&gt;
    &lt;title&gt;&lt;%= content_for?(:title) ? yield(:title) : t('website.name') %&gt;&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" =&gt; true %&gt;
    &lt;%= javascript_include_tag "application", "data-turbolinks-track" =&gt; true %&gt;
    &lt;%= yield(:google_maps_api) if content_for?(:google_maps_api) %&gt;
    &lt;%= csrf_meta_tags %&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p>Then in another view, I have a partial called _google_map.html.erb that does the following:</p>
  
  <pre><code>&lt;% content_for(:google_maps_api) do %&gt;
  &lt;%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=xyz&amp;sensor=false" %&gt;
  &lt;script type="text/javascript"&gt;
      function initialize() {
      var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;% end %&gt;
  
  &lt;div id="map-canvas" style="width: 100%; height: 100%"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When I look at the source, the js and div are getting properly output to the page.
  However, no map is displayed. Please note that I do have the following in my application.js file</p>
  
  <pre><code>//= require jquery
  //= require jquery.turbolinks
  //= require jquery_ujs
  //= require jquery.ui.datepicker
  //= require twitter/bootstrap
  //= require turbolinks
  //= require_tree .
  </code></pre>
  
  <p>Any idea why the map is not being displayed?
  Thanks!</p>