El contenedor de Google Map se muestra sin mapa

Soy consciente de que esto se ha hecho muchas veces antes, sin embargo, ninguna de las otras respuestas que he visto parece ayudarme. Básicamente, el contenedor para el mapa se muestra (como un espacio en blanco de 500x300px en la página) pero no hay un mapa. No importa lo que haga, no puedo mostrar el mapa.

Como probablemente pueda adivinar, no estoy familiarizado con Google Maps, por lo que agradezco cualquier ayuda. Establecí un zoom e incluí "desbordamiento: visible", que fue otra sugerencia, entre otras cosas.

Esperemos que este violín funcione:https://jsfiddle.net/7cvj565j/

findafitter.php - donde se muestra el mapa

<div class="container text-center">
    <div class="row">
        <div class="col-sm-8">
            <div id="map-container">
                <div id="googleMap" style="height:300px; width:500px;">
                    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap" async defer></script>
                    <script src="includes/findafitter2.js"></script>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            Enter your postcode to find your nearest fitter. Do you have any questions? <a href="contact.php">Let us know!</a>
            <input id="address" type="textbox" value="">
            <input type="button" value="Find My Nearest Fitter" onclick="checkZip(getElementById('address').value)">
        </div>
    </div>
</div>

findafitter2.js - el código para el mapa

var geocoder;
var map;
var markers = [];

function initialize() 
{
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(40.768505, -111.853244);
    var myOptions = 
    {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
    addPostCode('84101');
    addPostCode('84102');
    addPostCode('84103');
    addPostCode('84104');
    addPostCode('84105');
}

function addPostCode(zip) 
{
    geocoder.geocode( { 'address': zip}, function(results, status) 
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                name: zip
            });
            markers.push(marker);
        } 
        else 
        {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}

function checkZip(zip)
{
    var distance = Number.MAX_VALUE;
    var index = 0;
    geocoder.geocode( { 'address': zip}, function(results, status)
    {
        if (status == google.maps.GeocoderStatus.OK)
        {
            for(ix=0; ix< markers.length; ix++)
            {
                var tmp = getDistance(results[0].geometry.location, markers[ix].position);
                if (tmp < distance)
                {
                    distance = tmp;
                    index = ix;
                }
            }
            alert('nearest zipcode is :' + markers[index].name);
        }
    });
}

function getDistance(latlng1, latlng2)
{
    var R = 6371; // Radius of the earth in km
    var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI / 180;  // Javascript functions in radians
    var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(latlng1.lat()  * Math.PI / 180) * Math.cos(latlng2.lat()  * Math.PI / 180) *
            Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c; // Distance in km
    d = d * 0.621371192; // convert to miles
    return d;
}

styles.css - el bit relevante

#map-container
{
    min-height: 300px;
    color: #000000;
    overflow: visible;
}

El código de Google Maps se tomó de otra publicación SO (Google Maps: trazado del código postal) para ver si mi código de mapa lo estaba rompiendo, esto es bastante similar a lo que haré y ese código funciona para muchas personas.

Esperemos que sea lo suficientemente claro. ¡Gracias por adelantado!

Respuestas a la pregunta(2)

Su respuesta a la pregunta