Hi,
Displaying a Google/Bing map on every page load is expensive for sites with a lot of visitors. Also it takes up page real estate even in cases where a minority is interested in the map. And, it adds to the page load time.
So I'd like to display a map on demand only, or alternatively for authenticated users only, or a combination. An example of "on demand" would be two tabs where the default one lists custom post types and the second tab shows the same posts on a map when it's opened.
I don't think Google Maps even supports load on demand.
I noticed that Toolset may support OpenStreetMap in a future release: https://toolset.com/errata/toolset-maps-open-source-maps-feature/. That would at least solve the cost issue, but not the real estate and page load performance issue.
Is there any way to do this right now? I've even considered if it's possible to open a new browser window with a map, so that it is on demand (functionally) but technically it's a new page. But that would require passing info via the query string. Seems overly complex.
Hi,
Thank you for contacting us and I'd be happy to assist.
Toolset Maps plugin doesn't load the map or call the Map's API on every page load. The Maps API is only called, on the page where the map is specifically loaded. Also, the Toolset Maps plugin also maintains a local database cache for the map locations/coordinates, which greatly reduces the calls to Google Maps Geolocation API. This mechanism exponentially reduces the cost.
To implement an "on-demand" maps feature, you can create two separate pages. On one page, you can create a post view that only shows the results, but without any map. The other page can have a post view along with the map. This way, the visitor will have the choice to either visit the page with the results or the page with the results on the map.
I hope this helps and please let me know if you need any further assistance around this.
regards,
Waqar
Hi Waqar,
Thank you, that is very good to know.
The two page approach is something to consider.
Meanwhile I tried to insert a map into a conditional block and set it to display only if the user has a role (is logged on). That works, although it did not display my markers but that might be an entirely different issue. Is a map in a conditional block a valid approach to reduce map loads even more?
Kind regards,
Arno
On top of what I tried in my previous post, I now also tried to embed the map into the Kadence Blocks Tabs block. It has 3 tabs with this content:
Tab 1: text only (this tab is open on page load)
Tab 2: an image
Tab 3: a Toolset Conditional Block with a Toolset Map block inside.
The browser dev tools show that the image is only loaded after tab 2 is clicked. Likewise, after a click on tab 3, a lot of Google Maps related files are loaded, starting with a call to hidden link.
At first glance it all seems to work: the map is only loaded for users who are authenticated AND click on tab 3. To me this seems like a great approach because initial page load is faster, the API costs are kept to a minimum, and the map does not take up page real estate for all users.
I could not find this load on demand approach anywhere on the internet, and not in the Toolset course either. Am I overlooking something?
Here's my test page: hidden link
Thanks for writing back and for sharing this update.
I've checked the test page and from the presentation point of view, the tabs look great.
However, please note that the content inside the inactive tabs ( image and map ) is also loaded when the page initially loads. Using CSS code, the content inside those tabs is hidden and only the one that is active is shown.
For a true "load-on-demand approach", you'll have to find some third-party tabs plugin that supports loading the content of the tabs using the AJAX requests.
( this means that when the page loads only the content from the active tab is loaded and when another tab is selected, only then its content is loaded through AJAX, on-the-fly )
I see your point, but from my observations the behavior seems sufficient for the 3 goals I have (quick initial page load, minimize maps API calls, hide the map unless the user is interested). Here's what I see:
1. When the page is loaded, the Network section in the browser dev tools does NOT show the loading of the image or the map. So it's a very "light" page at that point.
2. When inspecting the HTML, the static HTML of the closed tabs (2 and 3) is indeed already loaded in the div with class "kt-tabs-content-wrap". It is simply hidden by CSS like you said. This is static HTML though, and hardly adds to the weight of the page.
3. When clicking on tab 2, only then the actual image file is loaded.
4. Likewise, when clicking on tab 3, only then the Network section of the dev tools shows a whole bunch of Google Maps files being loaded.
I'm testing in a Chrome incognito browser windows.
What do you think?
On second thought, when loading the page in hidden link and hidden link, a lot more files are loaded. Perhaps that's closer to what is actually happening and I should look for an ajax powered solution like you said. If Google Maps supports that at all.
Thank you for sharing these observations and this sounds like a good plan.
Following articles review some of the popular tabs plugins:
hidden link
hidden link
You're welcome to mark this ticket as resolved and start a new one for each new question or concern.
Thanks for those suggestions. I've checked and tried various options but none seem good enough (they still load too much on initial page load or don't clearly support the scenario at all).
For now I will go with your suggestion the use a separate page. I'll do it using an additional custom post type for the map, and relate it to the parent post type. I'll post further questions in a new ticket.
