Map returned undefined

[AdamZajler]

Description

It says to report an issue, so i'm reporting one 😅 .
What should I provide?

My current map setup

const polandBounds = {
  east: 26.5,
  west: 11.5,
  north: 56.5,
  south: 47,
};

const handleSetBounds = (): void => {
  if (!map) return;

  map.fitBounds(getMapBounds(window.google.maps, places));

  if (places.length < 2 && places.length > 0) {
    map.fitBounds(getMapBounds(window.google.maps, places));
    map.setZoom(14);
  } else if (places.length === 0) {
    map.setZoom(0);
    map.fitBounds(polandBounds);
  }
};

useEffect(() => {
  if (!map) return;
  handleSetBounds();

  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [map]);

<Map
  mapId={XXX}
  style={{
    width: '100%',
    height: 600,
  }}
  fullscreenControl={false}
  streetViewControl={false}
  mapTypeControl={false}
  clickableIcons={false}
  restriction={{
    latLngBounds: polandBounds,
    strictBounds: true,
  }}
  defaultBounds={polandBounds}
  onProjectionChanged={() => {
    if (!map) return;
    handleSetBounds();
  }}
>

Steps to Reproduce

none rn

Environment

• Library version: "@vis.gl/react-google-maps": "^0.10.0",
• Google maps version: weekly
• Browser and Version: 124.0.6367.78
• OS: Linux

Logs

No response

[usefulthink]

Hmm, apparently it's trying to dispatch the first map-events before the map is ready. See here:

react-google-maps/src/components/map/use-map-events.ts

Lines 103 to 109 in 904b918

	if (!center || !bounds || !Number.isFinite(zoom)) {
	console.warn(
	'[createEvent] at least one of the values from the map ' +
	'returned undefined. This is not expected to happen. Please ' +
	'report an issue at https://github.com/visgl/react-google-maps/issues/new'
	);
	}

That might have something to do with using defaultBounds instead of center/zoom. Can you try if it works when you specify defaultCenter/defaultZoom?

[AdamZajler]

Hmm, apparently it's trying to dispatch the first map-events before the map is ready. See here:

react-google-maps/src/components/map/use-map-events.ts

Lines 103 to 109 in 904b918

	if (!center || !bounds || !Number.isFinite(zoom)) {
	console.warn(
	'[createEvent] at least one of the values from the map ' +
	'returned undefined. This is not expected to happen. Please ' +
	'report an issue at https://github.com/visgl/react-google-maps/issues/new'
	);
	}

That might have something to do with using defaultBounds instead of center/zoom. Can you try if it works when you specify defaultCenter/defaultZoom?

For defaultCenter OR defaultZoom only:

index.modern.mjs:689 <Map> component is missing configuration. You have to provide zoom and center (via the `zoom`/`defaultZoom` and `center`/`defaultCenter` props) or specify the region to show using `defaultBounds`

for defaultCenter and defaultZoom={0} OR defaultCenter and defaultZoom={0} and defaultBounds I'm NOT getting an error :)

for defaultCenter and defaultBounds OR defaultZoom and defaultBounds

index.modern.mjs:361 [createEvent] at least one of the values from the map returned undefined. This is not expected to happen. Please report an issue at ...

In summary: when I'm using defaultBounds i should always provide defaultZoom and defaultCenter? 😅
If my summary is true, then error:

...... er (via the `zoom`/`defaultZoom` and `center`/`defaultCenter` props) or specify the region to show using `defaultBounds`

is a little misleading ;) and there should be info about providing "zoom/defaultZoom and center/defaultCenter " if using defaultBounds

[usefulthink]

that seems to be an error.

It should be either defaultBounds OR ( center/defaultCenter AND zoom/defaultZoom). So when one of center/zoom is specified it also expects the other one, but that isn't actually needed when defaultBounds is also present.

But the error disappearing when using center/zoom verifies that I need to test with just defaultBounds to reproduce this.

I think I will add another event-type for the onProjectionChanged event that doesn't include the camera-parameters and instead only contains the projection object. That should do the trick in this case.

[usefulthink]

That was easier than thought, I think this should already fix the error you are seeing: #346