Problems with scaling icons when fitting scaling to match the markers

  Kiến thức lập trình

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.

LEAVE A COMMENT