React-google-maps | Google maps application using React.js | Map library

i added two folders that was missing 'transversal-administration', 'transversal-translation' in the past i have just only: ['app']. the loader in the past load just the app folder

This might help others.

The issue in detail was even when I was mocking the useLoadScript, the test was still not mocking it at all. Seeing no errors and nothing, I was stuck.

The actual issue was the MyComponent.tsx file was using two properties of @react-google-maps/api i.e useLoadScript and also GoogleMap. But as you can see in my question, I was only trying to mock useLoadScript. Maybe since I wasn't mocking the in-use GoogleMap, the mock was failing silently (TIL). So, I changed the above code to the following, which passed the tests:

In your use case you want your code to automatically handle the directions route if you pass a single route(2 coordinates) and multiple route(3 or more coordinates). If the array is passing 2 coordinates, the maps should show point A and C from the start and end of the route while if the array has 3 or more coordinates, the maps should show A, B, C . . .

Here is a sample code (add your API key to work) and code snippet below that shows this use case. Please see inline comments for more information. Note: I used json files to pass the array of the coordinates.

Map.js

Your code appears to have the same coordinates for the start and end path of the polyline. To achieve your use case, I got 2 ways to solve this.

Here's the first, you need to first get the coordinates of your starting point and put it in a separate variable.Then you need to create a separate object for this coordinate with the condition that it will check if the start coordinate variable has value. This will create a separate Marker object that you can customize. Next you only need to map all the middle(waypoint) coordinates in your markers variable.

Here's a sample code and a code snippet that I made. I just passed the scheduledOrders value from json file.

You can't exactly use props in functional component as they are really only used in class based components. But there is a way to mimic their functionality. Since you are dealing with, functional components, you would want to make use of React hooks (useState) like you are doing already. So much like in class based components, there won't be much difference in terms of passing data. Below is a code snippet and here is a sample: https://stackblitz.com/edit/directions-eo8c6v

index.js

This is a sample code Note: use your own API key for the code to work) and a code snippet below on how I implement it. In the index.js, I put the path array in json file then imported the json file to be used as an element in my map. Then in my Map.js, I set the constuctor(props) and super(props). I put the react-google-maps in the render inside the GoogleMapExample variable. Then I use this variable in the return. In the componentWillMount function of your code, you need to use this.props.path.map to get the value of your path from the props.

Index.js

To achieve your goal you would want to use states in your application. But since you want to deal with it using Function components, you would need to make use of react hooks to use states.

Here is a working sample for your reference: https://stackblitz.com/edit/marker-with-infowindow-react-api-o6357y

Try this: label: {text: `${id}`, color: "blue"}

If you setup a proxy in the config, you (the dev) are expected to run a server where things are being proxied to e.g at http://localhost:3000. Webpack devserver does not create the proxied server for you. The proxy setting is commonly used to proxy api calls e.g