複数の約束事でGoogle Maps API V3イベントを処理するにはどうすればよいですか？

Question

URLにクエリ値がある場合、ページロード時に（？st = CA & s = park ...など）、javascriptはフェッチを使用してJSONファイルを取得します。

JSONデータは、htmlの作成、selectフィールド値の作成、Googleマップの作成という3つの他の約束に引き渡されます。モーションUIシリーズのアニメーションを使用してページのさまざまな要素（gmaps、choose、html）をアニメーション化するフルスクリーンオーバーレイがあります。

私が抱えている問題は、Promise.all []）then（）google "tilesloaded"イベントが発生したことを知っている。理由は、maアニメーションが行われている間にpはまだレンダリングされていますが、かなりの量のジャンクがあり、アニメーションは滑らかではありません。

基本的なコード/ロジックは私が関数内でアニメーションを実行する前に完了しているかどうかを知ることができるようにしたいGoogleマップイベントは、

google.maps.event.addListener(map, "tilesloaded", function() { }); 

ある

$(document).ready(function() { 

    var query = bsky_GetQueryFromURL(); // gets ?cat=23,43&state=CA 
    var data_P = bsky_GetCampaignProjects(); // gets JSON file with fetch 

    if (! $.isEmptyObject(query)) { 

     data_P 
      .then(data => bsky_FilterData(data, query)) // filters data by query 
      .then(data => bsky_MakeQueryView(data)) 
      .then(values => { 
       bksy_Animation_QueryView_IN(); 
      }); 

    } else { 

     bsky_MakeNoQueryView(); 

    } 
}); 

function bsky_MakeQueryView(data) { 
    var gMap_P = bsky_setupGoogleMap(data); 
    var pHTML_P = bsky_setupProjectsList(data); 
    var selects_P = bsky_setupRefineBySelects(data) 

    return Promise.all([gMap_P, pHTML_P, selects_P]); 
} 

、このようになります延期や約束によりこれを行う方法はありますか？

function bsky_setupGoogleMap(subset) { 
    var options = { 
     scrollwheel: false, 
     //navigationControl: false, 
     mapTypeControl: false, 
     //scaleControl: false, 
     //draggable: false, 
     zoom: 5, 
     center: new google.maps.LatLng(39.8333333,-98.585522), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 

    var map = new google.maps.Map(document.getElementById('map'), options); 
    var bounds = new google.maps.LatLngBounds(); 
    var markerImage = ''; 

    $(subset).each(function(k,v) { 

     if (v.geo.national == 0) { 
      var geo = v.geo.gmap; 

      if (geo.hasOwnProperty('lat') && geo.hasOwnProperty('lng')) { 
       var lat = parseInt(geo.lat); 
       var lng = parseInt(geo.lng); 
       var marker = new google.maps.Marker({ 
        position: {lat: lat, lng: lng}, 
        map: map, 
        title:v.project.title, 
        //icon: markerImage 
       }); 
       var infowindow = new google.maps.InfoWindow({ 
        content: bsky_Template_GMapInfoWindow(v), 
        maxWidth: 260 
       }); 

       marker.addListener('click', function() { 
        infowindow.open(map, marker); 
        var iw_container = $(".gm-style-iw").parent(); 
        iw_container.stop().hide(); 
        iw_container.fadeIn(1000); 
       }); 

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

       google.maps.event.addListener(infowindow, 'domready', function() { 

        var iwOuter = $('.gm-style-iw'); 
        var iwBackground = iwOuter.prev(); 

        iwOuter.parent().parent().css({left: '135px'}); 
        iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 10px !important;'}); 
        iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 10px !important;'}); 

       }); 

       bounds.extend(marker.getPosition()); 
      } 
     } 
    }); 

    map.fitBounds(bounds); 

    var listener = google.maps.event.addListener(map, "idle", function() { 
     if (map.getZoom() > 9) map.setZoom(11); 
      google.maps.event.removeListener(listener); 
    }); 

    return; 
} 

多分私は答えを持っています - 私は考えていたより簡単でしょうか？

function bsky_setupGoogleMaps(data) { 
    return new Promise(function(resolve, reject) { 
    // ... all the google map code from above 
    // then add this and resolve 
     google.maps.event.addListener(map, "tilesloaded", function() { 
      resolve('tilesloaded'); 
     }); 

    }); 
} 

Answer 1

function bsky_setupGoogleMaps(data) { 
    return new Promise(function(resolve, reject) { 
     // ... all the google map code from above 
     google.maps.event.addListener(map, "tilesloaded", resolve); 
    }); 
}