Increase Dynamic Maps performance

Here is a list of techniques to increase performance when using Dynamic Maps (Maps JavaScript API). Some of these come from the Maps Platform Optimization Guide.

Initial page load

• Asynchronous script tag loading - Google Maps can take advantage of best practices for web page script tag loading. This approach allows the web page to remain responsive while the Maps JavaScript API is loaded.

Map responsiveness

• Avoid displaying overlay content when a map is moving - Only add or remove overlay content from a map once the user stops panning or zooming.
• Avoiding intensive operations in Draw methods - Avoid things like executing queries, manipulating the DOM, etc.

Dealing with large datasets

• Using raster images for markers - Prefer png/jpg over svg.
• Optimizing markers - Render large number of markers as a single static element.
• Creating clusters to manage marker display - Represent many nearby markers as a cluster, with a single symbol. Also consider Marker Spiderfier.
• High performance data visualizations with deck.gl - Efficiently present large volumes of data with deck.gl.
• Try out Vector Maps - Take advantage of the user's device GPU for rapid map rendering.