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 this week I have published all the articles about the optimization of websites.

Article's Category

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 a map in your website you will see that your website speed gets slower and increases in your website loading time.

If your website has a very high loading time then your site will not be ranked in Google because Google serves that pages which have a 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 a 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 it will not affect the time of your website sometimes Google maps make your website load slowly and increase your website load time and it also eliminates too many requests if the user doesn't want to see the maps on your website.

How it works?

The working of this lazy load plugin for Google maps is the 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 has just scrolled to the element where your Google maps are implemented on your site. This plug-in also reloads 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, its 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.

So you have seen the demo it looks pretty fine and now let's see how we can implement this plugin by simply adding a tiny piece of code to 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 on 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 the google maps embed code.

Attributes	Description
data-lat	Defines the latitude value of your location.
data-lng	Defines 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 it's your job to implement these functionalities in your site and make your site load faster in google.

If you have any issues regarding this article please leave your positive feedback below.