Fixing the map position and width

[1nfinity-5starZ]

The way styles are applied are way off, so I came up with a little hack to decouple the ApiWrapper from the UI, here goes the code:

import React, { useEffect, useState } from "react";
import { GoogleApiWrapper, Map } from "google-maps-react";

function ParentComponent(props) {
  const [google, setGoogle] = useState();
  return (
    <div style={{ position: "relative", width: "100%", maxHeight: 500 }}>
      <GoogleProvider onChange={(google) => setGoogle(google)} />
      <Map google={google} />
    </div>
  );
}

function Wrapper(props) {
  useEffect(() => {
    props.onChange(props.google);
  }, [props.google]);

  return null;
}

const GoogleProvider = GoogleApiWrapper({
  apiKey: "",
})(Wrapper);

export default ParentComponent;

The trick is to create a separate component and then pass the google prop up in the hierarchy and store it in the state. Works with flexbox.

[Shahaed]

Worked like a charm. Thanks, @1nfinity-5starZ