score:3

Accepted answer
import React, { useState } from 'react';
import PlaceSearchInput from './PlaceSearchInput';
import { GoogleMap, withGoogleMap } from 'react-google-maps';

function Map({ center }) {
  return (
    <div>
      <GoogleMap defaultZoom={10} center={center} />
    </div>
  );
}

const WrappedMap = withGoogleMap(Map);

export default function Search(props) {
  const [mapCenter, setMapCenter] = useState({ lat: 3, lng: 2 });

  if (!props.isGoogleMapApiReady) {
    return <div>Loading...</div>;
  }
  return (
    <div style={{ margin: '100px' }}>
      <div style={{ height: '50vh', width: '50vh' }}>
        <WrappedMap
          loadingElement={<div style={{ height: '100%' }} />}
          containerElement={<div id="map" style={{ height: '100%' }} />}
          mapElement={<div style={{ height: '100%' }} />}
          center={mapCenter}
        />
        <PlaceSearchInput setMapCenter={setMapCenter} />
      </div>
    </div>
  );
}

Related Query

More Query from same tag