title: Smart loading of markers on Google Maps
body: <p>I have a system where the markers being used are in the form of pngs as these were found to be the fastest performance-wise since I have in excess of 2K markers, and this value can keep growing. However since pngs do not support marker rotation to represent direction, I have to switch these to svgs.</p>
  
  <p>The problem is that svgs in this amount are super slow, and therefore I had attempted a way to switch the pngs into svgs once the zoom level was past a certain value. The issue is that since all the markers convert to svg the program becomes almost non-responsive.</p>
  
  <p>Is there a way to only convert the pngs in the current viewport to svg and these will keep converting/reverting on map panning so that the performance will speed up and so that I will able to rotate the markers in the current view.</p>
  
  <pre><code>I created this codepen example to show the performance issue that I am referring to when you simply display the markers and zoom/pan on the map: https://codepen.io/DylanBulteel/pen/bvOMEv 
  </code></pre>
  
  <p>I also updated the codepen so that if you select pngs after a certain zoom level they will turn into svgs.</p>
  
  <p>Also a few additional points to clarify:</p>
  
  <p>1) Clustering data won't work as the points will be representing live data that is constantly being updated, and as a result the separate points need to be seen from all zoom levels</p>
  
  <p>2)Markers cannot be hidden at certain zoom levels since the user would want to see where the larger groups of points are from a far out zoom</p>