Google maps 谷歌地图API功能正常，但没有在IE和Firefox中显示？

我正在dreamweaver中创建一个响应性网站

我创建了一个GoogleMapsAPI，允许用户在一个单独的div中键入他们的post代码，然后单击submit。Google map div然后显示公司地址的驱动路线方向。Javascript功能在所有浏览器中都可以正常工作，因为你可以在地图区域中看到从一个目的地到另一个目的地的蓝线，然而，在Chrome和Firefox中，实际的google地图不会显示，相反，你只能看到一个灰色框

下面是我在head标记中的Javascript：

script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" /script

script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAHAfYOHY89NVUq-1CyGVzgBTPNatzWJGbQM8FMoJ2lMODanrQmxTwvcZlK0Uc4OEGRhhBcmvde8jn0w" /script

script type="text/javascript"

    var map = null; // Hold global map var
    var directions = null;
    var geocoder = null;
    var address = "Unit 4 Northgate Business Centre, Crown Road, EN1 1TG, UK";
    var noticeFx;

    $(document).ready(function(){

        map = new GMap2(
            document.getElementById("googlemap")
        );

        geocoder = new GClientGeocoder();
        geocoder.getLatLng(address, addressFound);          

        directions = new GDirections(map);
        GEvent.addListener(directions, "load", directionsLoaded);
        GEvent.addListener(directions, "error", directionsNotLoaded);           

        map.setUIToDefault();

        // Show directions on click
        $('#Shaker').click(function(){

            hideError();

            var postcode = $('#MyPosition').val();

            if(postcode == ''){
                displayError('Please supply your starting location');
                return false;
            }

            query = "from: " + postcode + ", UK to: " + address;
            directions.load(query, {
                "locale": "en_GB",
                'travelMode': G_TRAVEL_MODE_DRIVING
            });

            return false;

        });

    });

    function reduceMap(){ }
    function enlargeMap(){ }
    function hideDirections(){ }

    function showDirections() {
        $('directions-holder').tween.delay(500, $('directions-holder'), ['width', 900]);
    }

    function directionsLoaded(){
        //showDirections();
    }

    function directionsNotLoaded(){
        displayError('Could not locate your starting point');
    }

    function addressFound(point){

        var iiIcon1 = new GIcon();
        iiIcon1.image = 'images/marker.png';
        iiIcon1.iconSize = new GSize(55, 48);
        iiIcon1.iconAnchor = new GPoint(15, 33);

        var iiIcon = new GIcon();
        iiIcon.image = 'images/marker.png';
        iiIcon.iconSize = new GSize(27, 48);
        iiIcon.iconAnchor = new GPoint(15, 33);

        var marker = new GMarker(point, iiIcon1, true);
        var marker2 = new GMarker(point, iiIcon, true);

        map.addOverlay(marker);
        map.addOverlay(marker2);
        map.setCenter(point, 16);
    }

    function displayError(msg){
        $('#notice').html(msg);
        $('#notice').show(500);
    }

    function hideError(msg){ 
        $('#notice').hide();
    }
</script>

---

我的代码格式在Dreamweaver中是正确的，我只是不能让它在所有浏览器中工作？我肯定我错过了一些非常简单的东西。问题发生在IE或Chrome上？我有点困惑：） div id="googlemap"

#googlemap {

width:50%;
height:400px;
border-radius: 5px;
margin: 15px 0 0 0;

}