google-maps-react icon indicating copy to clipboard operation
google-maps-react copied to clipboard

Draw a route on the map

Open daniimd opened this issue 2 years ago • 1 comments

I would like to know if it is possible to draw a route on the map similar to the image below:

1_n7RewtYOFB9bt8PF9qcF3w

I didn't find anything from this library saying anything about it, if anyone can help me please.

My code:


import React, { useRef, useState, useCallback } from 'react';
import { Map, GoogleApiWrapper, Marker, Polygon, Listing, Polyline, MapWithADirectionsRenderer } from 'google-maps-react';

export const Geo = ({ google }) => {
  const mapRef = useRef(null);

  return (
    <>
      <Map 
          ref={mapRef}
		  google={google}
		  containerStyle={{
            height: '100vh',
            width: '100%',
          }}
          initialCenter={{
              lat: -23.49111858736318,
              lng: -46.711258044347865
           }}
           zoom={17}
	  >
          <Marker name={'Your position'}/>
      </Map>
    </>
  );
};

export default GoogleApiWrapper({
  apiKey: "key", // google maps key
})(Geo);

daniimd avatar Jul 06 '22 16:07 daniimd