{"id":739,"date":"2017-03-25T06:34:34","date_gmt":"2017-03-25T06:34:34","guid":{"rendered":"http:\/\/blog.azoora.com\/?p=739"},"modified":"2017-10-26T07:52:49","modified_gmt":"2017-10-26T07:52:49","slug":"lazy-loading-google-maps-jquery-plugin","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/javascript\/lazy-loading-google-maps-jquery-plugin\/","title":{"rendered":"Lazy Loading Google Maps jQuery Plugin"},"content":{"rendered":"<p>For Osvaldas Valutis\u2019s latest responsive freelance project there was a contact page where he had to display several Google Maps instances on a single page. You can see where he is heading to: what if a user is not going to scroll down the page because the very first map is what a user was looking for? What if the user is accessing the page on a smartphone under the cellular internet connection?<\/p>\n<p>The right way is to lazy-load the script file and map instances one by one. On every scroll and browser resize interval the\u00a0<a title=\"Lazy Loading Google Maps\" href=\"http:\/\/osvaldas.info\/lazy-loading-google-maps\" target=\"_blank\" rel=\"noopener\">Lazy-loading Google Maps Plugin<\/a>\u00a0checks whether there are any maps in the viewport to be displayed. If yes, it loads (if it wasn\u2019t loaded before) Google Maps API script file and then initiates the corresponding map instances. Finally, there\u2019s a callback function which is called within every map instance initiation so that you can continue doing whatever you need with your maps.<\/p>\n<blockquote><p>Requirements: jQuery Framework<br \/>\nDemo:\u00a0<a title=\"demo\" href=\"http:\/\/osvaldas.info\/lazy-loading-google-maps\" target=\"_blank\" rel=\"nofollow noopener\">http:\/\/osvaldas.info\/lazy-loading-google-maps<\/a><br \/>\nLicense: MIT License<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>For Osvaldas Valutis\u2019s latest responsive freelance project there was a contact page where he had to display several Google Maps instances on a single page. You can see where he is heading to: what if a user is not going to scroll down the page because the very first map is what a user was [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":914,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[34],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2017\/03\/lazy-loading-google-maps-1-compressor.gif","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-bV","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/739"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=739"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/739\/revisions"}],"predecessor-version":[{"id":741,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/739\/revisions\/741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}