Lazy Load Google Maps API with jQuery – Lazymap

A lightweight jQuery plugin to lazy / late load Google Maps API with custom API key, zoom arrange and location.

Plugin Overview

Plugin: lazymap
Author: Martino Gabrielli
Licence: MIT Licence
Published: March 25, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 3.68 KB

How to Use jQuery Lazy Load Google Maps’s Plugin:

1. To getting started with lazymap plugin, load the jQuery and lazymap JavaScript files into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Lazy Load Google Map Js -->
<script src="jquery.lazymap.js"></script>

2. Create a container (a div element) in which the map will be loaded. Also define the zoom arrange and map’s latitude & longitude data with the following mentioned data attributes.

<div class="map" data-lat="41.898743" data-lng="12.498862" data-zoom="11"></div>

3. Initialize the plugin in jQuery document ready function with that div selector and insert your Google Map API key into it.

$(document).ready(function(){
     $('.map').lazymap({
            apiKey: '',
            culture: 'it'
     });
});