I'm facing a challenge with loading an SVG overlay on a Google Map. The SVG file is quite large, about 50mb, resulting in a delay of around 10 seconds for it to load in the browser.
One solution I'm considering is splitting the SVG into 171 smaller files. However, I'm unsure of the best strategy to enhance the load time while maintaining high resolution at lower zoom levels.
Here's what I've attempted so far: - Converting image to PNG and JPG, but the resolution is not satisfactory. - Optimizing the SVG file, yet I haven't been able to reduce it significantly enough to impact load time.
Possible next steps include: - Layering SVGs in a specific order during page load (e.g., grass first, then cars, then buildings), although this may be cumbersome given the number of files. - Exploring the use of PolyMaps library for assistance. - Investigating how to utilize GZIP format for the SVG, although I'm uncertain about the process and desired outcome.
I'm seeking guidance from experienced developers who have worked with loading numerous SVGs onto the Google Maps API/canvas. This project involves creating an interactive map with custom infowindows already established (non-SVG) and using standard marker icons (SVG).
Any help or suggestions would be greatly appreciated.