title: Google Maps API --Map not displaying
body: <p>First time using the Google maps API, and the map isn't showing up.  I've read quite a few things regarding height and width declarations causing problems, I've tried switching from % to px with all associated styles and nothing changes.</p>
  
  <p><strong>I'm working in rails 4.2.1</strong><br>
  <strong>Map Javascript originally part of a Bootstrap template</strong></p>
  
  <p>Here's my Javascript:</p>
  
  <pre><code>function init() {
  var mapOptions = {
      zoom: 15,
      center: new google.maps.LatLng(40.6700, -73.9400), // New York
  
      // Disables the default Google Maps UI components
      disableDefaultUI: true,
      scrollwheel: false,
      draggable: false,
  
      // How you would like to style the map.
      styles: [{
          "featureType": "road",
      "elementType": "geometry",
      "stylers": [
          {
              "lightness": 100
          },
          {
              "visibility": "simplified"
          }
      ]
  },
  {
      "featureType": "water",
      "elementType": "geometry",
      "stylers": [
          {
              "visibility": "on"
          },
          {
              "color": "#C6E2FF"
          }
      ]
  },
  {
      "featureType": "poi",
      "elementType": "geometry.fill",
      "stylers": [
          {
              "color": "#C5E3BF"
          }
      ]
  },
  {
      "featureType": "road",
      "elementType": "geometry.fill",
      "stylers": [
          {
              "color": "#D1D1B8"
          }]
      }]
  };
  
  // When the window has finished loading create our google map below
  google.maps.event.addDomListener(window, 'load', init);
  
  
  // Get the HTML DOM element that will contain your map
  var mapElement = document.getElementById('map');
  
  // Create the Google Map using our element and options defined above
  var map = new google.maps.Map(mapElement, mapOptions);
  </code></pre>
  
  <p>In the index.html.erb,</p>
  
  <p>The div where the map is supposed to show up:</p>
  
  <pre><code>&lt;div id="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The script tag to link to the API:</p>
  
  <pre><code>&lt;script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=my_api_key_here"&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>Associated styles in my <strong>.less</strong> file:</p>
  
  <pre><code>#map {
  width: 100%;
  height: 200px;
  margin-top: 100px;
  }
  
  @media(min-width:767px) {
    #map {
      height: 400px;
      margin-top: 250px;
    }
  }
  </code></pre>
  
  <p>Associated styles in my <strong>.css</strong> file:</p>
  
  <pre><code>#map {
  width: 100%;
  height: 200px;
  margin-top: 100px;
  }
  
  @media(min-width:767px) {
    #map {
      height: 400px;
      margin-top: 250px;
    }
  }
  </code></pre>
  
  <p>Any advice would be greatly appreciated, thanks!</p>