javascript - Googleマップのサイズ変更が機能せず、時間がかかる

Question

最初に、私の問題は、方向サービスを備えた Google マップが正しく読み込まれないことでした。いくつかの調査の後、私はわかりgoogle.maps.event.trigger(map, 'resize').ました。今は動作します。ちょっと。

私のアプリの順序は次のとおりです：ページx、地図と方向を含むページA、ページy、地図と方向を含むページB。

私のスクリプトは次のとおりです。

function initialize(mapa_id) {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var mapOptions = {
        zoom: 17,
        mapTypeControl: false,
        zoomControl: false,
        draggable: false,
        center: new google.maps.LatLng(-23.583693,-48.042186),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      map = new google.maps.Map(document.getElementById(mapa_id), mapOptions);
      google.maps.event.trigger(map, 'resize');         
          directionsDisplay.setMap(map);
          if(mapa_id == 'map-canvas'){
              navigator.geolocation.getCurrentPosition(rotaInicial, onError, options);
          }else{
              directionsDisplay.setMap(map);
              navigator.geolocation.getCurrentPosition(rotaFinal, onError, options);  
          }
    }

function rotaInicial(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var start = new google.maps.LatLng(latitude,longitude);
    var end = new google.maps.LatLng(-23.578659,-48.038045);

      var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            google.maps.event.trigger(map, 'resize');
            directionsDisplay.setDirections(response);
        }
      });
    }

function rotaFinal() {
    var start = new google.maps.LatLng(-23.578659,-48.038045);
    var end = new google.maps.LatLng(-23.585503,-48.038324);

    var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            google.maps.event.trigger(map, 'resize');
            directionsDisplay.setDirections(response);
        }
      });
    }

さて、何が起こるか: ページ A が最初に地図をロードし (正しく、道順なしで)、数秒後 (5 - 8) に「サイズ変更」が行われ、道順が表示されます。次にページyに移動し、ボタンをクリックするとページBに移動し、マップは左上にのみ表示されます。数秒後、「サイズ変更」が行われ、方向が表示されます。このルーチンをもう一度実行すると (x ページに戻る)、最初のマップも左上に読み込まれ、これらすべてが発生します。

2 つの問題があります。

1. ページが読み込まれると、地図にすでに道順を表示したいと考えています。
2. 可能ではない場合でも、少なくともマップを正しくロードする必要があります。そして、このサイズ変更はより速く動作するはずです。

「サイズ変更」コードを正しい場所に配置したかどうかわかりません。何か案は？