0

JavaScript を使用して Web サイトのページの 1 つで Google マップの背景を使用していますが、常に読み込まれるとは限らないことに気付きました。代わりに、その一部が左上隅に小さな四角形として表示されます (ページをタイリングしているときに停止したかのように)。画面を更新したり、ウィンドウのサイズを変更したりすると、ロードされ、しばらくの間問題を再現できません。

これは、最初に Web サイトにアクセスしたときに最も一貫して発生します。これは、Web サイトを引き付けたい新しい訪問者にとって明らかに問題です。

読み込みを改善するためのアイデアはありますか? または問題が何であるかについてのアイデアはありますか？

コード：

/*
    Global
    */
    var map;

    function initialize() {

        /*
        Basic Setup
        */

        var latLng = new google.maps.LatLng(39.726020913196265, -105.00015970000004);

        var myOptions = {
            panControl: false,
            zoomControl: false,
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: false,
            draggable: true,
            disableDoubleClickZoom: true,     //disable zooming
            scrollwheel: false,
            zoom: 16,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP //   ROADMAP; SATELLITE; HYBRID; TERRAIN;
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        /*
        MARKER
        */

        /*
        //for custom image
        var image = 'yourflag.png';
        icon: image 

        //for animation marker drop
        animation: google.maps.Animation.DROP

        */
        var markerlatlng = new google.maps.LatLng(39.726020913196265, -105.00015970000004);

        var marker = new google.maps.Marker({
            position: markerlatlng,
            title:"Hello World!"
        });

        marker.setMap(map);

        /*
        INFO Bubble
        */

        myInfoWindowOptions = {
            content: '',
            maxWidth: 275
        };

        infoWindow = new google.maps.InfoWindow(myInfoWindowOptions);

        google.maps.event.addListener(marker, 'click', function() {
            infoWindow.open(map,marker);
        });

        google.maps.event.addListener(marker, 'dragstart', function(){
            infoWindow.close();
        });

        infoWindow.open(map,marker);


    }//end initialize


    /*
    onLoad
    */
    $(function(){
        initialize();

        $("#zo").click(function(event){
            event.preventDefault(); 
            map.setZoom( map.getZoom()-1 );
            //map.setCenter(new google.maps.LatLng(9.825183,15.1975769));
        });

        $("#zi").click(function(event){
            event.preventDefault(); 
            map.setZoom( map.getZoom()+1 );
        });

        $("#gt").click(function(event){
            event.preventDefault(); 
            var lt1 = new google.maps.LatLng(36.114739, -115.171840);
            //map.setZoom( 16 );
            map.panTo(lt1);
        });

    });
4

1 に答える 1

0

まず第一に、ページのスクロール効果が気に入っていますが、コードとページ ソースを見ると、onload イベントがどのように発生するのか完全にはわかりません。私も、特定のブラウザで特定のページが完全にロードされないという問題が時々ありました。

バックグラウンドをロードするために複数のイベントを添付しようとしましたか?

        function doLoad() {  // this is what executes when page is to load
             initialize();
        }
        //different event handlers for page load
        if ( window.addEventListener ) { 
              window.addEventListener( "load", doLoad, false );
        }
        else if ( window.attachEvent ) { 
              window.attachEvent( "onload", doLoad );
        } 
        else  if ( window.onLoad ) {
              window.onload = doLoad;
        }
        else window.setTimeout('doLoad', 1000);
于 2013-01-18T17:21:05.330 に答える