6

グーグルマップに問題があります。問題は、ここに示すように、マップのごく一部しかロードされていないことです。

ここに画像の説明を入力してください

ページが読み込まれた後、ブラウザのサイズを少しでも変更すると、次に示すように、完全なマップが更新されて正しく読み込まれます。 ここに画像の説明を入力してください

これが私のjavascriptコードです：

google.maps.event.addDomListener(window, 'load', initialize);

$(document).ready(function(){                               
    var $width = document.getElementById("propertysection").offsetWidth;
    $('#map-canvas-2').width($width-28-175);
    $('#map-canvas-2').height($width);
    $('#myGridMap').height($width);
});

function initialize() { 
    var map; 
    var propertyMap;
    var marker; 
    var infowindow;
        var myOptions = {
            zoom: 6,
            center:new google.maps.LatLng(50.7,-86.05),
            mapTypeId: google.maps.MapTypeId.HYBRID
        }
        map = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions);                  
        infowindow = new google.maps.InfoWindow({
            content: 'Property Info',
            position: new google.maps.LatLng(0, 0)
        }); 
    }

誰かが問題が何であるかを提案できますか？ありがとう。

4

2 に答える 2

5

jqueryreadyメソッドをwindowloadイベントと混合しないでください（http://api.jquery.com/ready/を参照）。

代わりに、.ready関数内からinitializeを呼び出すか、（マップを初期化する前に）initializeメソッド自体にウィンドウサイズ変更関数を配置します。

于 2013-03-25T03:51:45.893 に答える
0

ブートストラップとメガメニューを使用していますが、公式のGoogleMapsAPI非同期ロード機能を使用して解決しました。https://developers.google.com/maps/documentation/javascript/tutorial#asynch

   function initialize() {

        var myLatLng = new google.maps.LatLng(37.4221147, -122.0867373);

        var map_canvas = document.getElementById('map_canvas');

        var map_options = {
            center: new google.maps.LatLng(37.4221147, -122.0867373),
            zoom: 12,
                    mapTypeControl: false,
                    panControl: false,
            zoomControlOptions: {
                        position: google.maps.ControlPosition.LEFT_CENTER
            },
            streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(map_canvas, map_options);

        var contentString =
            '<b>Google Gate Bridge</b>' +
            '<p>Mountain View, CA 94043, USA</p>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });

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

    }

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }

    var tab = document.getElementById('YourHtmlObjectID');
    YourHtmlObjectID.onmouseover = loadScript;
    YourHtmlObjectID.onclick = loadScript;
于 2014-04-27T13:11:26.713 に答える