Problems with scaling icons when fitting scaling to match the markers

Question

I have a problem with resizing markers on a map. I am adding a number of markers to a map and using "bounds.extend(marker0.position); and Map.fitBounds (bounds);" to set the initial scaling. The code below works OK rescaling the markers as the map is zoomed. However, if the "bounds.extend(marker0.position);" is uncommented, the markers will not resize.

Advice appreciated.

function initMap() {
           const GoogleMap = new google.maps.Map(document.getElementById('MapInsert'),
               {
                   zoom: 15, scrollwheel: false, zoomControl: true,
                   styles: [{ 'featureType': 'poi', 'stylers': [{ 'visibility': 'off' }] }],
                   center: { lat: 51.187831, lng: -2.545948 }
               });
           const marker0 = new google.maps.Marker({
               Map: GoogleMap, position: { lat: 51.187096, lng: -2.544606 },
               title: 'Test1',
               optimized: false,
               icon: '/clubs/flooding/icons/culverticon.png'
           });
//           bounds.extend(marker0.position);

           google.maps.event.addListener(GoogleMap, 'zoom_changed', function () {
               const zoomSizes = [8, 15, 25, 40, 50, 60, 70, 80, 90, 100];
               var zoom = this.getZoom();
               if (zoom > 21) zoom = 21;
               if (zoom < 12) zoom = 12;
               var relativePixelSize = zoomSizes[zoom - 12];
               marker0.setIcon({
                   url: '/clubs/flooding/icons/culverticon.png', scaledSize: new                    google.maps.Size(relativePixelSize, relativePixelSize)
               });
               marker0.setTitle('Zoom: ' + zoom + ' IconSize: ' + relativePixelSize)
           })
       }; 

This code will reszise the markers dependent on the zoom level of the map. However, if the command "bounds.extend(marker0.position);" is uncommented, the markers will not resize.

Answer 1

After more investigation I have resolved the issue. The problem is caused by the timing. With the bounds.extend(marker0.position); statement. This delays the processing of the map so it has not fully loaded before the google.maps.event.addListener(GoogleMap, 'zoom_changed', function () { is called. As a result the event does not get called when the map is resized.

Removing the bounds.extend(marker0.position); statement removes the delay so the map HAS loaded before the event call.

The problem has been resolved by loading the map asynchronously and waiting for the map libraries to be imported before creating the map:

async function initMap() {
const { Map } = await google.maps.importLibrary('maps');
const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
const GoogleMap = new google.maps.Map(document.getElementById('MapInsert'), {
    zoom: 15, scrollwheel: false,
    zoomControl: true,
    styles: [{ 'featureType': 'poi', 'stylers': [{ 'visibility': 'off' }] }],
    center: { lat: 51.187831, lng: -2.545948 },
});