Load Google Maps javascript file when need

Question

I have a page with a button to open Maps in a modal. Since only few times the users will use this function I was wondering if it was possible to load the Google Maps library only if need (I prefer that user waits in this case instead of wait each time the page is loaded).

Thi is my modal:

<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>

And there are several libraries of 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>

do you have any lazy loading setup. In you angular app? like oclazyload? — Shyam Babu, Sep 20 '17 at 10:26
Then the quickest solution that i can think is to wrap the load of script tag inside a directive and put it inside your dialog.html. So only when the dialog is compiled the the script is loaded. check this so answer. https://stackoverflow.com/questions/19917774/why-ng-scope-is-added-to-javascript-inline-of-my-partial-view-and-makes-alert-no/22476888#22476888 checkout the solution here. — Shyam Babu, Sep 20 '17 at 10:59

score 0 · Answer 1 · answered Sep 20 '17 at 10:36

Add onclick to your button

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

and then something like this

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

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

Load Google Maps javascript file when need

1 Answers1