L'API Google Maps --Carte affiche pas

Première fois à l'aide de l'API Google maps, et la carte ne s'affiche pas. J'ai lu pas mal de choses concernant la hauteur et la largeur des déclarations à l'origine des problèmes, j'ai essayé de commutation à partir de % de px avec tous les styles et rien ne change.

Je travaille dans les rails 4.2.1

Carte Javascript à l'origine partie d'un Bootstrap modèle

Voici mon code Javascript:

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);

Dans l'index.html.erb,

La div où la carte est censée montrer:

<div id="map"></div>

La balise de script pour le lien vers l'API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=my_api_key_here">
</script>

Associé styles dans mon .moins fichier:

#map {
width: 100%;
height: 200px;
margin-top: 100px;
}

@media(min-width:767px) {
  #map {
    height: 400px;
    margin-top: 250px;
  }
}

Associé styles dans mon .css fichier:

#map {
width: 100%;
height: 200px;
margin-top: 100px;
}

@media(min-width:767px) {
  #map {
    height: 400px;
    margin-top: 250px;
  }
}

Tout conseil serait grandement apprécié, merci!