InfoWindow re-render problem using MapCameraProps

[CDTdenisP]

Hello, I've built a map using InfoWindow on AdvancedMarker, and I've used MapCameraProps because I have a select where the user can change the map center.

The problem is that when I have an InfoWindow open and I drag the map, MapCameraProps change, causing the re-rendering of all markers and the open InfoWindow.

I tried using MapCameraProps in your example as well, and I was able to replicate the problem.
There's another way to achieve the result without causing a re-render every time I drag the map?

import React, { useState, useCallback } from 'react';
import {createRoot} from 'react-dom/client';

import {
  AdvancedMarker,
  APIProvider,
  InfoWindow,
  Map,
  Marker,
  Pin,
  MapCameraProps,
  MapCameraChangedEvent
} from '@vis.gl/react-google-maps';

import ControlPanel from './control-panel';
import {MovingMarker} from './moving-marker';
import {MarkerWithInfowindow} from './marker-with-infowindow';

const API_KEY =
  globalThis.GOOGLE_MAPS_API_KEY ?? (process.env.GOOGLE_MAPS_API_KEY as string);

  const INITIAL_CAMERA = {
    center: {
      lat: 12,
      lng: 0,
    },
    zoom: 3,
  };

const App = () => {
  const [mapProps, setMapProps] = useState<MapCameraProps>(INITIAL_CAMERA);

  const handleCameraChange = useCallback((ev: MapCameraChangedEvent) => {
		console.log('camera changed', ev.detail);

		setMapProps(ev.detail);
	}, []);

  return (
    <APIProvider apiKey={API_KEY} libraries={['marker']}>
      <Map
        mapId={'bf51a910020fa25a'}
        defaultZoom={3}
        defaultCenter={{lat: 12, lng: 0}}
        gestureHandling={'greedy'}
        disableDefaultUI
        {...mapProps}
        onCameraChanged={handleCameraChange}>
        {/* simple marker */}
        <Marker
          position={{lat: 10, lng: 10}}
          clickable={true}
          onClick={() => alert('marker was clicked!')}
          title={'clickable google.maps.Marker'}
        />

        {/* advanced marker with customized pin */}
        <AdvancedMarker
          position={{lat: 20, lng: 10}}
          title={'AdvancedMarker with customized pin.'}>
          <Pin
            background={'#22ccff'}
            borderColor={'#1e89a1'}
            glyphColor={'#0f677a'}></Pin>
        </AdvancedMarker>

        {/* advanced marker with html pin glyph */}
        <AdvancedMarker
          position={{lat: 15, lng: 20}}
          title={'AdvancedMarker with customized pin.'}>
          <Pin background={'#22ccff'} borderColor={'#1e89a1'} scale={1.4}>
            {/* children are rendered as 'glyph' of pin */}
            👀
          </Pin>
        </AdvancedMarker>

        {/* advanced marker with html-content */}
        <AdvancedMarker
          position={{lat: 30, lng: 10}}
          title={'AdvancedMarker with custom html content.'}>
          <div
            style={{
              width: 16,
              height: 16,
              position: 'absolute',
              top: 0,
              left: 0,
              background: '#1dbe80',
              border: '2px solid #0e6443',
              borderRadius: '50%',
              transform: 'translate(-50%, -50%)'
            }}></div>
        </AdvancedMarker>

        {/* simple positioned infowindow */}
        <InfoWindow position={{lat: 40, lng: 0}} maxWidth={200}>
          <p>
            This is the content for another infowindow with <em>HTML</em>
            -elements.
          </p>
        </InfoWindow>

        {/* continously updated marker */}
        <MovingMarker />

        {/* simple stateful infowindow */}
        <MarkerWithInfowindow />
      </Map>

      <ControlPanel />
    </APIProvider>
  );
};

export default App;

export function renderToDom(container: HTMLElement) {
  const root = createRoot(container);

  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

[usefulthink]

In your example, the App component re-renders because the mapProps state is updated. There's no way around that. But what you can do is to memoize the contents of the map so the re-render doesn't hit as hard:

function App() {
  const [mapProps, setMapProps] = useState<MapCameraProps>(INITIAL_CAMERA);

  const handleCameraChange = useCallback((ev: MapCameraChangedEvent) => {
		console.log('camera changed', ev.detail);

		setMapProps(ev.detail);
	}, []);

  const mapContent = useMemo(()=>(
    <AdvancedMarker
      position={{lat: 20, lng: 10}}
      title={'AdvancedMarker with customized pin.'}
    >
      <Pin
        background={'#22ccff'}
        borderColor={'#1e89a1'}
        glyphColor={'#0f677a'}></Pin>
    </AdvancedMarker>

     {/* ... */}
  ), []); // the dependencies here control when the content gets re-rendered

  return (
    <APIProvider apiKey={API_KEY} libraries={['marker']}>
      <Map {...mapProps}>
        {mapContent}
      </Map>
    </APIProvider>
  );
}

[CDTdenisP]

Thanks for you're reply, I'll try with useMemo.