Google地图会生成但不会显示

Question

我有地图生成（我在控制台中看到代码），但实际上并没有在Chrome上显示任何内容。它显示在FF但它看起来很糟糕。

我已经确定建议使用CSS，但我可能错过了一些内容：

CSS：

#maps{
  height: 100%;
  margin: 0;
}

HTML：

<details id='geoLocation'>
        <summary>Find Us</summary>
        <div id='maps'></div>
</details>

JS：

function getLocation(){
    var geoConfig = {enableHighAccuracy: true, maximumAge: 60000, timeout: 100000}
    var distance = navigator.geolocation.watchPosition(showInfo,showError, geoConfig);
}
function showInfo(position){
   maps(position);
}
function showError(e){
    if (e.code == 2){
          alert("Position unavailable");
    }else{
         alert("Other error");
    }
}

function maps(position){
    var location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);

    var mapOptions = {
       center: location,
       zoom: 12,
       mapTypeId: google.maps.MapTypeId.ROADMAP
   };

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

    var markerOptions = {
       position: location,
       map: map
   };
    var marker = new google.maps.Marker(markerOptions);
    marker.setMap(map);

   distance = (Math.sqrt(Math.pow((position.coords.latitude-45),2)+Math.pow((position.coords.longitude-75),2)))*79;
    var infoWindowOptions = {content: 'Distance to Store = ' + distance};

    var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
    google.maps.event.addListener(marker,'click',function(e){

     infoWindow.open(map, marker);

   });
}