Map is not loaded correctly

[hoangviet1112]

Please provide an explanation of the issue

I have this component but the map is not loaded correctly, can someone help to figure out what is happened?

import { useCallback, useMemo, useRef } from 'react';
import {
  GoogleMap,
  Marker,
  MarkerClusterer,
  useJsApiLoader,
} from '@react-google-maps/api';

export function NewMapBox() {
  const locations = [
    { lat: -31.56391, lng: 147.154312 },
    { lat: -33.718234, lng: 150.363181 },
    { lat: -33.727111, lng: 150.371124 },
    { lat: -33.848588, lng: 151.209834 },
    { lat: -33.851702, lng: 151.216968 },
    { lat: -34.671264, lng: 150.863657 },
    { lat: -35.304724, lng: 148.662905 },
    { lat: -36.817685, lng: 175.699196 },
    { lat: -36.828611, lng: 175.790222 },
    { lat: -37.75, lng: 145.116667 },
    { lat: -37.759859, lng: 145.128708 },
    { lat: -37.765015, lng: 145.133858 },
    { lat: -37.770104, lng: 145.143299 },
    { lat: -37.7737, lng: 145.145187 },
    { lat: -37.774785, lng: 145.137978 },
    { lat: -37.819616, lng: 144.968119 },
    { lat: -38.330766, lng: 144.695692 },
    { lat: -39.927193, lng: 175.053218 },
    { lat: -41.330162, lng: 174.865694 },
    { lat: -42.734358, lng: 147.439506 },
    { lat: -42.734358, lng: 147.501315 },
    { lat: -42.735258, lng: 147.438 },
    { lat: -43.999792, lng: 170.463352 },
  ];

  const center = useMemo<google.maps.LatLngLiteral>(
    () => ({ lat: 53.5, lng: -5 }),
    [],
  );

  const mapRef = useRef<google.maps.Map>();
  const onLoad = useCallback((map: any) => (mapRef.current = map), []);
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: config.GOOGLE_MAPS_API_KEY,
    id: 'google-map-script',
  });

  return (
    <div className="h-full rounded-lg border-[1px] border-gray">
      {isLoaded && (
        <GoogleMap
          center={center}
          mapContainerClassName="v-full h-[calc(100%-30px)]"
          mapTypeId="satellite"
          onLoad={onLoad}
        >
          {locations.length && (
            <MarkerClusterer>
              {clusterer => {
                clusterer.clearMarkers();
                return (
                  <>
                    {locations.map(location => (
                      <Marker
                        clusterer={clusterer}
                        key={`${location.lat} ${location.lng}`}
                        noClustererRedraw={true}
                        position={{
                          lat: location.lat,
                          lng: location.lng,
                        }}
                      />
                    ))}
                  </>
                );
              }}
            </MarkerClusterer>
          )}
        </GoogleMap>
      )}
    </div>
  );
}

Your Environment

os: mac/windows

node --version 17

react version 18

webpack version

@babel version

@react-google-maps/api version ^2.19.3

How does it behave?

How should it behave correctly?

Basic implementation of incorrect behavior in codesandbox.com

Here is the result of this component

[JustFly1984]

@hoangviet1112 please look at your browser logs for errors. Also please do not post unformatted code. Provide a link to minimal reproduction in codesandbox.io for example

[hoangviet1112]

Hi @JustFly1984, sorry for my issue format, I have updated the issue and here is the link CodeSandbox, please help to check why this component cannot render Map correctly.
CodeSandbox

[HARSHJAIN47]

@hoangviet1112 first make your file js-> jsx because you are working html also

`import { useCallback, useState } from "react";
import {
GoogleMap,
Marker,
MarkerClusterer,
useJsApiLoader,
} from "@react-google-maps/api";

const locations = [
{ lat: -31.56391, lng: 147.154312 },
{ lat: -33.718234, lng: 150.363181 },
{ lat: -33.727111, lng: 150.371124 },
{ lat: -33.848588, lng: 151.209834 },
{ lat: -33.851702, lng: 151.216968 },
{ lat: -34.671264, lng: 150.863657 },
{ lat: -35.304724, lng: 148.662905 },
{ lat: -36.817685, lng: 175.699196 },
{ lat: -36.828611, lng: 175.790222 },
{ lat: -37.75, lng: 145.116667 },
{ lat: -37.759859, lng: 145.128708 },
{ lat: -37.765015, lng: 145.133858 },
{ lat: -37.770104, lng: 145.143299 },
{ lat: -37.7737, lng: 145.145187 },
{ lat: -37.774785, lng: 145.137978 },
{ lat: -37.819616, lng: 144.968119 },
{ lat: -38.330766, lng: 144.695692 },
{ lat: -39.927193, lng: 175.053218 },
{ lat: -41.330162, lng: 174.865694 },
{ lat: -42.734358, lng: 147.439506 },
{ lat: -42.734358, lng: 147.501315 },
{ lat: -42.735258, lng: 147.438 },
{ lat: -43.999792, lng: 170.463352 },
];

const center = {
lat: -3.745,
lng: -38.523,
};

const containerStyle = {
width: "400px",
height: "300px",
};

export function NewMapBox() {
const apiKey = "apikey";
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: apiKey,
id: "google-map-script",
});

const [map, setMap] = useState(null);
const onLoad = useCallback((map) => {
const bounds = new window.google.maps.LatLngBounds(center);
map.fitBounds(bounds);
}, []);

return (

{isLoaded && (

{/* {locations.length && (

{(clusterer) => {
clusterer.clearMarkers();
return (
<>
{locations.map((location) => (
<Marker
clusterer={clusterer}
key={${location.lat} ${location.lng}}
noClustererRedraw={true}
position={{
lat: location.lat,
lng: location.lng,
}}
/>
))}
</>
);
}}

)} */}

)}

);
}`

[JustFly1984]

The code is typescript, but you are trying to run it as javascript.
Either remove types from the code and rename it to jsx, or rename file to tsx and setup typescript for your project.

x at the end of extension signaling that fail contains JSX