reactjs - How to migrate from react-google-maps to @react-google-maps/api

Question

I would like to migrate react-google-maps to @react-google-maps/api.

My problem is that I'm new in development and I don't know how to do it easily ?

I tried multiple things, but most of the time I got the error Invalid hook call. Hooks can only be called inside of the body of a function component.

Below, the function that I would like to migrate :

import { withScriptjs, withGoogleMap, GoogleMap } from "react-google-maps";
import { SearchBox } from "react-google-maps/lib/components/places/SearchBox";

const CustomSkinMap = pose(useLoadScript, withGoogleMap)((props) => {  
 
  return (
    <GoogleMap
      ref={props.onMapLoad}
      center={{ lat: parseFloat(props.center.lat), lng: parseFloat(props.center.lng) }}
      defaultZoom={13}
      //defaultCenter={{ lat: props.lat, lng: props.lng }}
      onDragEnd={props.onDragEnd}
      onBoundsChanged={props.onBoundsChanged}
      defaultOptions={{
        scrollwheel: true,
        disableDefaultUI: true,
        defaultVisible: true,
        zoomControl: true
      }}
    >
      <SearchBox
        ref={props.onSearchBoxMounted}
        onPlacesChanged={props.onPlacesChanged}
        bounds={props.bounds}
        controlPosition={google.maps.ControlPosition.TOP_LEFT}
      >
        <input
          type="text"
          className="location"
          placeholder={props.t("Homepageheader._AddAddress")}
          onChange={props.changeInMap}
          style={{
            boxSizing: "border-box",
            border: "1px solid transparent",
            margin: "10px 10px 0 10px",
            width: "95%",
            height: "32px",
            padding: "0 12px",
            borderRadius: "3px",
            boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
            fontSize: "14px",
            outline: "none",
            textOverflow: "ellipses"
          }}
        />
      </SearchBox>
    </GoogleMap>
  );
});

All help are welcome. Thank you in advance...

question from:https://stackoverflow.com/questions/65645938/how-to-migrate-from-react-google-maps-to-react-google-maps-api

Answer 1

Waitting for answers