How can I speed up the rendering of a map from Google Sheets data?

Other Questions Google docs
1

I’m having trouble with a map that’s taking forever to load. It’s pulling data from Google Sheets, but it’s just two columns (CITY and NAME) with 40 rows. Some cities show up more than once.

My browser says the network stuff only takes a few seconds, so I’m confused why the whole thing is so slow. All the cities are in the same country, if that helps.

Here’s a simplified version of what I’m doing:

google.load('visualization', '1', {'packages': ['table', 'map']});
google.setOnLoadCallback(startMap);

function startMap() {
  var dataSource = new google.visualization.Query('https://sheets.google.com/mydata');
  dataSource.send(showMap);
}

function showMap(result) {
  if (result.isError()) {
    console.error('Oops, something went wrong');
    return;
  }

  var mapData = new google.visualization.DataView(result.getDataTable());
  
  var cityList = new google.visualization.Table(document.getElementById('city_list'));
  cityList.draw(result.getDataTable(), {showRowNumber: false});

  var cityMap = new google.visualization.Map(document.getElementById('city_map'));
  cityMap.draw(mapData, {showTip: true});
}

Any ideas on how to make this faster? It’s taking almost a minute to show up!

2

I’ve dealt with similar map rendering issues before, and one thing that really helped was implementing lazy loading. Instead of loading all 40 rows at once, you could load just the visible area initially and then load more data as the user pans or zooms. This significantly reduced the initial load time for me.

Another trick I found useful was to use a web worker for data processing. It offloads the heavy lifting to a background thread, keeping the main thread free for smoother UI interactions. You might want to give that a shot.

Also, have you considered using a more lightweight mapping library like Leaflet? In my experience, it’s faster than Google Maps for simpler use cases like yours. Just food for thought. Hope this helps!

3

I encountered a similar issue with slow map rendering and found that optimizing data management helps considerably. One approach is to cache data locally so that you are not fetching it repeatedly, which can be achieved with localStorage or IndexedDB. Preprocessing the data by converting city names to coordinates in advance eliminates runtime geocoding delays. Switching to a lighter map library can also improve performance, and reducing duplicate data by aggregating entries per city has proven beneficial in my experience.

4

hey there, have u tried using a geocoding service to convert city names to coords beforehand? that could speed things up. also, maybe group duplicate cities together in ur sheet? less data to process = faster loading. just a thought. good luck with ur map!