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

   });
}