Speed Up Google Maps With Lazy Load - Async Google Maps

A simple JavaScript solution to make Google Maps load faster and improve page load experience.

The Async Google Maps jQuery plugin defers the loading of a Google Map (embedded into your page via iframe) until it is scrolled into view.

How to use it:

1. Load the Async Google Maps plugin's JavaScript after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/async-google-maps.js"></script>

2. Load the following CSS if you need to display a loading indicator while loading the Google Map.

<!-- Default Loading Indicator -->
<link href="css/async-google-maps.css" rel="stylesheet" />
<!-- Loading.io Loading Indicator -->
<link href="css/async-google-maps-cl.css" rel="stylesheet" />
<!-- CSS-Loader Loading Indicator -->
<link href="css/async-google-maps-lio.css" rel="stylesheet" />
<!-- All In One -->
<link href="css/async-google-maps-all.css" rel="stylesheet" />

3. Embed a Google map into your webpage via iframe. Note that you must insert the Google Map URL into the data-src attribute:

<iframe class="g-maps" 
        data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.9147706511!2d-74.1197632417694!3d40.6974034421145!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY!5e0!3m2!1sen!2sus!4v1585882901950!5m2!1sen!2sus" 
        width="600" 
        height="450" 
        frameborder="0">
</iframe>

4. Attach the function asyncGoogleMaps to the Google Map iframe and done.

$('.g-maps').asyncGoogleMaps();

5. Display a loading indicator in the Google Map's parent container while loading.

// default loading indicator
$('.g-maps').asyncGoogleMaps({
  spinner: {
    attach: true, 
    remove: true
  }
});

// use Bootstrap 4 loading spinner
$('.g-maps').asyncGoogleMaps({
  spinner: {
    attach: true, 
    remove: true, 
    type: 'bootstrap', 
    bsSpinnerClass: 'spinner-grow'
  }
});

// or use a custom loading spinner
$('.g-maps').asyncGoogleMaps({
  spinner: {
    attach: true, 
    remove: true, 
    type: 'custom',
    customSpinner: 'Your Loading Spinner HTML',
    delay: 5000
  }
});

6. Enable the fixHeight option to prevent page jumping.

$('.g-maps').asyncGoogleMaps({
  fixHeight: true
});

7. Determine an offset to start loading the Google Map. Default: 0.

$('.g-maps').asyncGoogleMaps({
  offset: -100
});

8. Custom functions.

$('.g-maps').asyncGoogleMaps({
  // determine if container is in viewport - can be user customized
  isInViewport: function (opts) {

    // container bounds
    var containerTop = $(this).offset().top;
    var containerBottom = containerTop + $(this).outerHeight();

    // viewport bounds
    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // detect if container is in viewport
    return containerBottom > viewportTop && containerTop + opts.offset < viewportBottom;
  },

  // automatically attach inline min-height to prevent reflow - can be user customized
  setHeight: function(opts) {

    // only if height should be fixed inline
    if(opts.fixHeight) {

        // iterate over all map containers
        $(opts.containers).each(function () {
            
            var height = $(this).attr('height');
            if(typeof height !== 'undefined') {
                $(this).attr('style', 'min-height:' + height + 'px;');
            }
        });
    }
  },

  // remove a predefined spinner from the parent container of the map - can be user customized
  removeSpinner: function(opts) {

    // remove spinner within parent container
    var hFunc = function() { 
        $(this).parent().find('.' + opts.spinner.spinnerClass).remove();
    };

    // wait a specific time in milliseconds before removing spinner
    setTimeout(hFunc.bind(this), opts.spinner.delay);
  },

  // attach a predefined spinner to the parent container of the map - can be user customized
  attachSpinner: function(opts) {
    var spinner = opts.spinner;
    var $spinnerDiv;

    // if spinner should be attached
    if(spinner.attach) {

        // iterate over all map containers
        $(opts.containers).each(function () {

            // create bootstrap spinner
            if(spinner.type == 'bootstrap') {

                // create spinner container
                $spinnerDiv = $('<div>').addClass(spinner.bsSpinnerClass + ' ' + spinner.spinnerClass).attr('role', 'status');
                $spinnerDiv.prepend($('<span>').addClass('sr-only').html('Loading...'));

            // create included spinner
            }else if(spinner.type == 'included') {

                // create spinner container
                $spinnerDiv = $('<div>').addClass('simple-spinner' + ' ' + spinner.spinnerClass).attr('role', 'status');

            // create custom spinner
            }else if (spinner.type == 'custom') {

                // create custom spinner element by passed HTML
                $spinnerDiv = $(spinner.customSpinner).addClass(spinner.spinnerClass);
            }

            // prepend spinner to parent container
            $(this).parent().prepend($spinnerDiv);
        });
    }
  },

  // append trigger event - can be user customized
  triggerAsyncLoad: function (opts) {
    $(window).on('resize scroll', function() { opts.checkAndLoad(opts) });
  },

  // check and load map(s) - can be user customized
  checkAndLoad: function(opts) { checkAndLoadMaps(opts) },

  // before load initiated - can be user customized
  beforeLoad: function(opts) {},

  // after load initiated - can be user customized
  afterLoad: function(opts) {}
  
});

Changelog:

2020-04-07

• Reworked configuration handling

2020-04-07

• Added 75% version of loading.io spinners

---

This awesome jQuery plugin is developed by thexmanxyz. For more Advanced Usages, please check the demo page or visit the official website.