[Gelöst] Google Map Lazy Load

[Author]

Artikel

[Akhil]

Hi. as you know google map is causing some loading time, the best way to optimize it is by lazy loading them, unable to find any plugin that does this. Could you test and advice on how to use this script to achieve this purpose please. thanks.

hidden link

[Minesh Supporter Languages: Englisch (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

I do not familiar using the lazyload scrip you shared and even not sure even that jquery plugin you shared could be made to work with Toolset maps. I checked the link you shared and it looks like you can use it when you are manually inserting maps with the api yourself.

I tried to google it and I find few option which support google map lazy load. Can you please check the following plugins that may help you:
=> https://wordpress.org/plugins/a3-lazy-load/
=> hidden link

[Akhil]

Hi, all those normal lazy load plugins are for loading the google map in an iframe. toolset map doesn't do that, thus need some custom function or script.

could you check with the developers if this is possible to implement?
another option is a static map with a modal link to the full map.

These two above can greatly improve the loading speed, as you know map itself loading 10+ scripts and styling, including from google directly.

[Minesh Supporter Languages: Englisch (English ) Timezone: Asia/Kolkata (GMT+05:30)]

could you check with the developers if this is possible to implement?
==> I checked the script you shared and I found that you should not be able to use it with Toolset Maps because the script it self creates map so there is no need to add map using Toolset maps.

It holds the lat-long data in the following format:

<div class="map" data-zoom="11" data-locations="[41.898743, 12.498862], [41.998743, 12.898862]"></div>

As you can see "data-locations" attribute holds the comma separated location lat-long.

Now, when you call the script:

jQuery(function(){
  jQuery('.map').lazymap({
    apiKey: 'replace-your-map-api-key'
  });
});

It creates a map and plots the markers on map based on the input value given to "data-locations" attribute.

If you have created Types address field then you can use view to generate the "data-locations" attribute values.