Lazy Load Google Maps API Using jQuery - lazymap.js

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

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-locations="[lat1-1,lng1-2], [lat2-1,lng2-2]"
     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'
  });
});

5. Override the default attributes.

$(function(){
  $('.map').lazymap({
    zoomAttr: 'data-zoom',
    locationAttr: 'data-locations',
    keepAttributes: ['class']
  });
});

Changelog:

2019-06-18

  • Removed latitudeAttr and longitudeAttr, added data-locations with logic to add more than one marker to the same map

2019-03-22

  • fixed a typo error

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.