How to make "lazy load" for google maps?

Question

JavaScript

There is a Google map that is inserted into the site in this way:

<div id="big-map"></div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('big-map'), {
          zoom: 17.5,
          center: {lat: 55.709600, lng: 37.620251}
        });

        var image_1 = '/project/images/other/domnouta.png';
        var point_1 = new google.maps.Marker({
          position: {lat: 55.55100, lng: 37.6220},
          map: map,
          icon: image_1,
          title: 'Точка'
        });			
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK6grJrsAOZ4ON7qBgYKWCu0pdPAtpQeo&callback=initMap">
    </script>

Is it possible to somehow make the map open according to the Lazy Load principle - that is, so that it is initialized only when the user scrolls to the place where the map is located?
Thank you.

Answer 1

Yes, exactly the same as with pictures - change the src of the element when it enters the scope.