Custom element is not shown on google map when using @react-google-maps/api

Question

Hi I am pretty new to Google maps and trying one of the @react-google-maps/api library. When I am using my custom element, it is not shown on the map. I don't see any obvious errors. Any ideas why it is not shown? Here is my code snippet, thank you.

import { useContext, useEffect, useState } from 'react';
import { GoogleMap, useLoadScript, LoadScriptProps, MarkerF } from '@react-google-maps/api';

interface Props {
  lat: number;
  lng: number;
}

interface CustomDivProps extends React.HTMLAttributes<HTMLDivElement> {
  lat: number;
  lng: number;
}

const MyComponent: React.FC<CustomDivProps> = ({ lat, lng, ...rest }) => {
  return <div {...rest}>Test</div>;
};

const SearchResultsMap = ({ lat, lng }: Props) => {
  const [map, setMap] = useState<google.maps.Map>();
  const [libraries] = useState<LoadScriptProps['libraries']>(['visualization', 'geometry']);
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
    libraries,
  });

  if (!isLoaded)
    return (
      <div className="grid h-1/2 w-screen place-items-center">
        <Spin />
      </div>
    );

  if (loadError)
    return (
      <div className="grid h-1/2 w-screen place-items-center">
        Error Loading Map: {loadError.message}
      </div>
    );

  return (
    <div className=“block h-full”>
      <GoogleMap
        center={{ lat, lng }}
        zoom={15}
        mapContainerStyle={{ width: '100%', height: '100%' }}
        onLoad={(map) => setMap(map)}
        options={{
          mapTypeControl: false,
          streetViewControl: false,
          zoomControl: false,
          disableDefaultUI: true,
        }}
      >
        <MyComponent lat={Number(lat)} lng={Number(lng)}>
          Test
        </MyComponent>
      </GoogleMap>
   </div>
  );
};

export default SearchResultsMap;

When replacing MyComponent with MarkerF from @react-google-maps/api, it works. However, I would like to use my own component as a practice. Does @react-google-maps/api allow custom element? Thanks in advance.

Welcome to Stack Overflow! What component are you planning to put in there though? Is it a marker? An info window? A text box? Since the library you are using have specific documented components built in to make things work, I don't think you can put anything custom in it. Unless you just want it to float on top of the map and not interact with it. — Yrll
– Yrll, Commented Sep 10, 2023 at 23:43

Deny · Accepted Answer · 2023-12-27 03:14:14Z

0

As far as I know, you can't use a custom made component there, because the GoogleMap component expects a specific component such as Marker, Polygon, InfoWindow etc.

What you can do is adding the contents inside those specific component such as this

<InfoWindow>
  <>
    <Table responsive striped borderless size="sm">
    ...
    </Table>
  </>
</InfoWindow>

answered Dec 27, 2023 at 3:14

Deny

111 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom element is not shown on google map when using @react-google-maps/api

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related