Google Maps API | Infinite Ajax Scroll | JQuery
- Google Maps with autocomplete, directions, search, and rotating satellite view.
- Infinite AJAX Scroll JQuery plugin enables the page to load when scrolled to bottom.
- Collapsible left-sticky navigation menu with JQuery.
- Please replace with your own API key.
- To obtain a Google Maps API key:
- Go to the Google API Console.
- Create or select a project.
- Click Continue to enable the API and any related services.
- On the Credentials page, get an API key (and set the API key restrictions).
- Extensible through extensions.
- Quick and easy to implement because it extends your already existing server-side pagination (takes less then 5 minutes to implement).
- Infinite AJAX Scroll is open source and is available on GitHub
Progressive enhancement: Infinite AJAX Scroll works by enhancing your server-side pagination with AJAX. When a client doesn't support JavaScript it will fall back on your server-side pagination. Infinite Ajax Scroll
Markup:
<div class="container">
<div class="item">...</div>
<div class="item">...</div>
</div>
<div id="pagination">
<a href="page1.html">1</a>
<a href="page2.html" class="next">2</a>
</div>Javascript:
var ias = $.ias({
container: ".container",
item: ".item",
pagination: "#pagination",
next: ".next a"
});
ias.extension(new IASSpinnerExtension()); // shows a spinner (a.k.a. loader)
ias.extension(new IASTriggerExtension({offset: 3})); // shows a trigger after page 3
ias.extension(new IASNoneLeftExtension({
text: 'There are no more pages left to load.' // override text when no pages left
}));- Please remember to link to your JQuery file or use the Google Hosted Jquery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>