0
votes

I've implemented google map on my react page and successfully showed it. But Now I can't find how to properly implement the advanced paid features like geolocation, roads and direction in the map.

I want my visitors to use all the features of the map from my web page. Here is my code:

import GoogleMapReact from 'google-map-react';
import LocationPin from "./LocationPin";

const Map = ({ location, zoomLevel }) => (
  <div className="map">
    <div className="google-map" style={{ height: '271px', width: '90vw' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_MAPS_API_KEY }}
        defaultCenter={location}
        defaultZoom={zoomLevel}
      >
        <LocationPin
          lat={location.lat}
          lng={location.lng}
          text={location.address}
        />
      </GoogleMapReact>
    </div>
  </div>
);

export default Map;