2

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

我创建了一个 Google Maps API，允许用户在单独的 div 中输入他们的邮政编码，然后单击提交。然后，Google 地图 div 会显示到公司地址的驱动路线方向。Javascript 功能在所有浏览器中都可以正常工作，因为您可以在地图区域中看到从一个目的地到另一个目的地的蓝线，但是，在 Chrome 和 Firefox 中，实际的谷歌地图不会显示，而是您只能看到一个灰色框。

这是我在 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>

这是我对地图的 html 标记：

 div id="googlemap"

这是我为 #googlemap 设置的 CSS 样式：

#googlemap {

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

}
4

0 回答 0