Question

我正在Dreamweaver中创建一个响应式网站。

我创建了一个Google Maps API，允许用户在单独的div中输入他们的帖子代码，然后点击提交。然后Google地图div显示到公司地址的行车路线指示。 Javascript功能在所有浏览器中都能正常工作，因为您可以在地图区域看到从一个目的地到另一个目的地的蓝线，但是，在Chrome和Firefox中，实际的Google地图无法显示，而您只能看到灰色框。

这是头标记中的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&amp;v=2&amp;sensor=true&amp;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>

这是我的地图html标记：


 div id="googlemap"

以下是#googlemap的

#googlemap {

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

}

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

0 个答案: