必要に応じてGoogleマップのJavaScriptファイルをロード

Question

モーダルでマップを開くためのボタンが付いたページがあります。ユーザーがこの機能を使用する回数がほんのわずかなので、必要に応じてGoogleマップライブラリを読み込むことができるかどうか疑問に思っていました（この場合、ユーザーがページが読み込まれるたびに待つのではなく待ちます）。

ティは私のモーダルです：

<div class="modal" id="showBuildingsMaps" data-backdrop="static" 
    data-keyboard="false"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title">Select building</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="box-body" style="height: 80vh;"> 
        <ng-map zoom="3" center="[{{selectedBuilding.latitude}}, {{selectedBuilding.longitude}}]" default-style="false"> 
         <marker ng-repeat="m in markers" position="{{m.latitude}},{{m.longitude}}" title="{{m.name}}" 
             on-click="buildingFromMaps(m)"></marker> </ng-map> 
       </div> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 

とGoogle Mapsのいくつかのライブラリがあります

<!-- Maps --> 
<script 
    src="https://maps.googleapis.com/maps/api/js?key={myKey}" 
    type="text/javascript"> 
    </script> 
<!-- is useful to avoid google not found exception before this script was loaded bedore google maps --> 
<script defer 
    th:src="@{/static/assets/plugins/angular-maps/ng-map.min.js}" 
    type="text/javascript"></script> 
<script 
    src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js" 
    type="text/javascript"></script> 
<script> 
    MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ 
     = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'; //changed image path 
    </script> 

Answer 1

あなたのボタンにonclickの

<button type="button" onclick="loadGoogleMaps()" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 

してから、この

ような何かを追加

<script> 
function loadGoogleMaps() { 
var mapScript = document.createElement('script'); 
mapScript.src = put your source here; 

document.head.appendChild(script); 
} 
</script>