How to Lazy Load Google Maps

How to Lazy Load Google Maps

After publishing articles about lazy loading YouTube videos, lazy loading images, lazy loading disqus comments and lazy loading AdSense ads I am having another tutorial or article for you in which I am going to tell you how you can lazy load Google maps on your website.

I am gonna call this week of site optimization because in this week I have published all the articles about optimization of websites.

For whom this article is?

This article is not for publishers or content writers I am publishing this article only for those people who have business websites and they want to provide the location of their business using Google maps.

Google maps have built in functionality for embedding maps and if you use the embed code provided by Google maps to embed map in your website you will see that your website speed gets slower and increase in your website loading time.

If your website has very high loading time then your site will not be ranked in Google because Google serves that pages which have low load time.

But if you have embedded Google maps in your website or if you want to embed Google maps in your website I am having an website optimization hack for you and that hack is lazy loading Google maps.

Benefits of Lazy loading Google maps:

Lazy loading Google Maps provides you many benefits like it will not affect the time of your website like sometimes Google maps make your website load slow and increase your website load time and it also eliminates too much requests if user don't want to see the maps on your website.

How it works?

The working of this lazy load plugin for Google maps is same like lazy loading AdSense ads or lazy loading disqus comments and that is that your Google maps will not be loaded on page load event, they will only be loaded when they are in the viewport or if the user have just scrolled to the element where your Google maps are implemented on your site. This plug-in also reloads the Google maps every time you resize your browser window or the orientation of your device.

Google maps are not loaded at page load time using this simple plugin which means that your website will not be affected, usually it's load time.

Demo:

So first of all let me show you the demo of this plug-in and after that we will see how we can implement this lazy load technique for our Google maps on our website website.
How to Lazy Load Google Maps

So you have seen the demo it looks pretty fine and now let's see how we can implement this plugin by simply adding tiny piece of code in our website.

This tiny piece of code is available in jQuery version you can grab the files from the links below.

  • jquery.lazy-load-google-maps.js (uncompressed; 2 KB)
  • jquery.lazy-load-google-maps.min.js (minified; 1 KB)


  • Initialization of lazy load Google maps plugin:

    Here it comes to initialization of this plug-in. To initialize this plug-in you have to use the code provided below.
    $(selector).lazyLoadGoogleMaps([options]);

    So our global function name is lazyLoadGoogleMaps.

    Selector will be the selector of the google maps element.

    Supported options or configurations:

    These are some supported options or configurations for this simple plug-in which you can modify according to your requirements the description is also provided for your ease.
    $(selector).lazyLoadGoogleMaps(
    {
        key: false,
        // just an API key if you have one
     
        libraries: false,
        // libraries to load, i.e. 'geometry,places'
     
        signed_in: false,
        // sign-in on a map enabled/disabled
     
        language: false,
        // set language, i.e. 'en', 'en-GB'
     
        region: false,
        // set region, i.e. 'GB'
     
        callback: false
        /*
            a callback function called within every map instance initiation;
            there are two variables that are passed as parameters to the function:
            function( container, map )
                * container - the container element which has a selector 'selector' (see the first line)
                * map - the map instance which is a part of Google Maps API
        */
    });

    This plug-in also has two helper methods did you help you furthermore in implementing this plug-in for Google maps in your website.
    var $instance = $(selector).lazyLoadGoogleMaps( [options] );
     
    $instance.debounce( duration, fn );
     
    $instance.throttle( duration, fn );

    If you have multiple maps with different locations on your webpage and you need to mark them and center their view the most simple way is to use this code using this plugin.
    <div class="google-map" data-lat="40.7056258" data-lng="-73.97968"></div>
    <div class="google-map" data-lat="51.5072113" data-lng="-0.1144521"></div>
    <div class="google-map" data-lat="31.2243489" data-lng="121.4767528"></div>
    <div class="google-map" data-lat="48.8588589" data-lng="2.3470599"></div>
    <div class="google-map" data-lat="35.7090711" data-lng="139.7321219"></div>
     
    <script src="jquery.js"></script>
    <script src="jquery.lazy-load-google-maps.min.js"></script>
    <script>
    ;(function ($, window, document, undefined) {
        $('.google-map').lazyLoadGoogleMaps({
            callback: function (container, map) {
                var $container = $(container),
                    center = new google.maps.LatLng($container.attr('data-lat'), $container.attr('data-lng'));
                map.setOptions({
                    zoom: 15,
                    center: center
                });
                new google.maps.Marker({
                    position: center,
                    map: map
                });
            }
        });
    })(jQuery, window, document);
    </script>

    Attributes & Description:

    These are the attributes used in the above code with their description provided. You will find the values of these attributes in google maps embed code.
    AttributeDescription
    data-latDefines the latitude value of your location.
    data-lngDefines the longitude value of your location.

    Final Thoughts:

    So here this article ends now you have successfully implemented this lazy loading of google maps in your website. Now i have shared every method to optimize your website so now its your job to implement these functionalities in your site and make your site load faster in google.

    If you have any issue regarding this article please leave your positive feedback below and avoid abuse!

    Post a Comment

    Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

    Recent Comments

    {getWidget} $results={3} $label={comments} $type={list}