Как лучше убрать серый фон после зума?

Серый фон после зума в Google Maps обычно появляется, когда контейнер карты изменил размер, но карта не получила событие resize, либо когда тайлы не успели догрузиться/были закрыты CSS-слоем. Если это происходит после изменения масштаба страницы, открытия модалки, смены вкладки или анимации контейнера, нужно принудительно обновить карту после завершения изменения размеров.

Для старого Google Maps API использовали trigger resize:

google.maps.event.trigger(map, 'resize');
map.setCenter(currentCenter);

В новых версиях чаще помогает сохранить центр и вызвать setCenter после того, как контейнер стал видимым:

const center = map.getCenter();
 
setTimeout(() => {
  map.setCenter(center);
}, 100);

Проверьте CSS контейнера карты. У него должны быть явные размеры, а родительские блоки не должны иметь нулевую высоту:

.map {
  width: 100%;
  height: 400px;
  min-height: 300px;
}
 
.map img {
  max-width: none;
}

Последнее правило важно: глобальные стили сайта вроде img { max-width: 100%; } иногда ломают тайлы Google Maps. Для карт обычно нужно вернуть max-width: none для изображений внутри карты.

Если серый фон появляется именно при browser zoom, проверьте, нет ли transform: scale() на родителе карты. Google Maps плохо переносит масштабирование контейнера через CSS transform. Лучше менять размеры контейнера обычной версткой, а не scale.

Итог: задайте нормальную высоту контейнера, уберите max-width для img внутри карты, после показа/изменения размера карты пересинхронизируйте центр. Если карта находится во вкладке/аккордеоне, инициализируйте ее только после открытия блока или вызывайте обновление после открытия.