Title: Load map with javascript
Last modified: March 23, 2021

---

# Load map with javascript

 *  Resolved [vdhooft](https://wordpress.org/support/users/vdhooft/)
 * (@vdhooft)
 * [5 years ago](https://wordpress.org/support/topic/load-map-with-javascript/)
 * Hi,
    I would like to improve the loading speed of several of the pages where 
   I use your plugin. I tried to load the shortcode with ajax, but that does not
   work. Is there a way to load the map with javascript? Or another method to delay
   the loading after the rest of the page has been loaded. I try to achieve a sort
   of lazy load, similar to what you do with images and videos.
 * Thanks,
    Alex

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Camille V](https://wordpress.org/support/users/socrapop/)
 * (@socrapop)
 * [5 years ago](https://wordpress.org/support/topic/load-map-with-javascript/#post-14224959)
 * Dear Alex,
 * First of all, without speaking of Travelers’ map, I never saw a shortcode loaded
   via Ajax in WordPress, I don’t know if it’s possible.
 * Then, I’m surprised by your request, as I designed this plugin with speed in 
   mind. I’m not sure what exactly you are trying to speed up? Do you have slow 
   loading time only on page with my plugin? How many markers do you have?
    Because
   the shortcode is processed during the page request (while the page is still blank).
   I only used WordPress default queries, so that it is fast.
 * Then when the page load (event “DOMContentLoaded”), the plugin is initialized
   and create the map container with the information received during the loading
   time (so no more loading when the page is shown), and initiate leaflet. After
   that, the map tiles are beginning to load. And the popovers images are loading
   on click only.
 * So the only thing you could do to speed up the initial loading of the page is
   having a caching plugin, so the query is saved between users and the plugin loads
   instantly.
 * If you still want to delay the initialization of Travelers’ Map, you can comment
   out a part of code in `wp-content/plugin/travelers-map/includes/public/js/travelersmap.
   js` line 340 :
 *     ```
       //document.addEventListener("DOMContentLoaded", function () {
         //if (document.getElementsByClassName("travelersmap-container")) {
          // initTravelersMap();
         //}
       //});
       ```
   
 * Then, to init travelers map, you have to use this code wherever you want :
    `
   if (document.getElementsByClassName(“travelersmap-container”)) { initTravelersMap();}`
 *  Thread Starter [vdhooft](https://wordpress.org/support/users/vdhooft/)
 * (@vdhooft)
 * [5 years ago](https://wordpress.org/support/topic/load-map-with-javascript/#post-14225417)
 * Thanks, Camille for your really quick reply.
    And yes, your plugin is quite fast,
   but still, I would like to make my page load faster. Without including a map 
   I have a google PageSpeed Insight for mobile of 99. With a map, it falls to around
   80. My goal is to make it as high as possible in preparation for the google may
   changes.
 * You are correct with the ajax shortcode load. I can make it work for some, but
   not in this case. I also tried using an iframe (you can defer an iframe without
   any problems). This gives the best “speed” result. But it needs some code to 
   make the centering work well. And the problem is clicking on the items.
 * The solution that you gave works well. I start the map with a 5-sec delay. The
   page speed score is not as high as with an Iframe, but a lot better than when
   the map loads immediately.
 * For others that like to do something similar:
 *     ```
       jQuery(document).ready(function($) {
          setTimeout(function() {
       	console.log("Start map auto...");
       	if (document.getElementsByClassName("travelersmap-container")) {
       		initTravelersMap();
       	}
         }, 5000);
       });
       ```
   
 * Thanks again for your help! 🙂

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Load map with javascript’ is closed to new replies.

 * ![](https://ps.w.org/travelers-map/assets/icon-256x256.jpg?rev=2100131)
 * [Travelers' Map](https://wordpress.org/plugins/travelers-map/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/travelers-map/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/travelers-map/)
 * [Active Topics](https://wordpress.org/support/plugin/travelers-map/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/travelers-map/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/travelers-map/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [vdhooft](https://wordpress.org/support/users/vdhooft/)
 * Last activity: [5 years ago](https://wordpress.org/support/topic/load-map-with-javascript/#post-14225417)
 * Status: resolved