Lazy Load Google Maps API Using jQuery - lazymap.js

Lazy Load Google Maps API Using jQuery - lazymap.js
File Size: 3.54 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

lazymap.js is a small and configurable jQuery plugin for lazy loading Google Maps to increase the performance of your blog or website. The plugin delays the loading of Google Maps JavaScript API until the map wrapper is scrolled into view.

How to use it:

1. Create a container to place the embedded Google maps and specify the latitude, longitude and zoom level in the data attributes:

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

2. Load the jQuery lazymap.js script after jQuery but before the closing body tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous">
</script>
<script src="jquery.lazymap.js"></script>

3. Initialize the plugin and insert your own Google Maps API key. Get an API Key here.

$(function(){
  $('.map').lazymap({
    apiKey: 'YOUR API KEY HERE'
  });
});

4. Display the Google map in a language other than English.

$(function(){
  $('.map').lazymap({
    apiKey: 'YOUR API KEY HERE',
    culture: 'fr'
  });
});

Changelog:

2019-03-18

  • v0.1.1

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