I am utilizing the Google Maps API v3 to build a map with multiple layers that are loaded upon user request. The layers are loaded in Geojson format using the following code:
function getgeojson(json)
{
proplayer = new google.maps.Data();
proplayer.loadGeoJson('../public/geoprop/index');
proplayer.setStyle({
fillColor: 'red',
strokeColor: 'red',
fillOpacity: 0.3,
strokeWeight: 1
});
proplayer.setMap(map);
proplayer.addListener('mouseover', function(event) {
infoWindow.setContent(event.feature.getProperty('kta'));
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
});
}
The layers consist of approximately 3.5 K polygons with simple geometries (mainly rectangular shapes) and take around 5 seconds to be fully displayed on the map. To indicate loading while the layer is rendered, I am using two functions:
ajaxindicatorstart('loading data.. please wait..');
ajaxindicatorstop();
to initiate and stop the loader. However, I am facing difficulty in detecting when the rendering is completed. I have attempted using:
proplayer.addListener( 'metadata_changed', function () {ajaxindicatorstop();});
and
google.maps.event.addListener(map, 'idle', function() {
ajaxindicatorstop();
});
suggested by other users but it was not successful. Is it possible to achieve this? Are there any alternative solutions to overcome this issue?
Thank you in advance