google-maps-react | Companion code to the `` How to Write a Google Maps React | REST library

Chart.js version 3 is not compatible. Change it to ^2.9.4. The same problem as you and I have been solved.

Since you will be clicking the Marker for the InfoWindow to show, you can use the InfoWindow's marker parameter instead of position parameter. You also need to use the InfoWindow's visible parameter and set it to true for it to show. You can check this simple code how I did it(I just used data from json file). Code snippet below:

It's a problem in the current version of google-maps-react and React's strict mode. See: https://github.com/fullstackreact/google-maps-react/issues/476

You probably shouldn't disable strict mode, so you'll have to either fix the library yourself or wait for someone to do that, then upgrade.

I made a couple of changes in your MapMaker.js from the codesandbox link you provided.

First, I added a state named showingInfoWindow and assign a value of false. This will be the state that will indicate if the infowindow will be shown or not.

Then, I added a function named onMarkerClick which is called everytime the Marker is clicked. This will set the state of showingInfoWindow to true.

Next, I put a condition in the return of MapMaker class, which will only show the infowindow when the showingInfoWindow is set to true.

Then, I add the onInfoWindowClose function that sets the state of showingInfoWindow back to false.

Lastly, I added the onCloseClick parameter in the and call the onInfoWindowClose function.

You can follow the code snippet below for the changes in MapMaker.js

You have various options to securely store an api key. If you are using CircleCi for continuous builds, you can create an environment key. Check your build solution for something similar.

There are also alternatives for encrypting files such as git-secret. That way you could use an environment config file.

Bottom line do not store keys in code or in config files unless you have it encrypted.

If you have an array of coordinates and would like to show the directions in the map that shows these coordinates, you need to set the first coordinate as your start , the last coordinate as the destination and the coordinates in between to be your waypoints.

Then once you will add a new coordinate in the array, you need to include the previous last coordinate in your waypoint and make the newly added coordinate as the destination.

Here is a sample code that shows this where I use Google Place Autocomplete where you can input a place and it will provide suggestion then once you choose a place from the suggestion it will get it's coordinate andpush the coordinate in the array.

Please see the code snippet below:

Firstly, make sure you are copying the same package-lock.json file that you use to install deps locally, to make sure you have the same dependency tree in your container as you do locally.

COPY package.json package-lock.json /app/

Then, make sure that you are matching the same node/npm version as you run locally (replace 12 with the major version you are running, be it 10, 12, 14 or whatever):

FROM node:12

Each node version is bundled with a specific npm version (latest 12 version comes with npm 6.14.6), you can find the bundled NPM version int he changelogs, https://github.com/nodejs/node/tree/master/doc/changelogs

Additionally, instead of running npm install, you might wanna run npm ci in the container. The latter skips any checks for discrepancy between the lock file and your package.json file and just installs the locked dependency tree, which is not only faster, but will also match your local dep tree exactly.

EDIT:

In addition, this line:

COPY . /app

Would also overwrite node_modules unless you have ignored it via .dockerignore or similar.

Easiest would probably be to add a .dockerignore file to the same folder as your Dockerfile and add lines stating:

I haven't caught from your comment if you've tried things I've suggested... But you've edited your post with some random (and incorrect) changes. OK, I'll try to post an answer. It's an answer related to the original code because it looks simpler and contains less errors.

This is how I think it should look like:

I was using create-react-app + JSX, so i had to open two terminals one for npm start (on port 3000 for react server) and one for node server.js (for backend on port 4000) and these two are connect through the proxy that i had on my package.json. when i have finished with development, all i had to do was:

1. remove the proxy from package.json.

2. npm run build, which makes a copy of all my code into the build folder.

3. app.use("/", express.static("build")); in my server.js file to make the build folder accessible to app.

4. app.all("/*", (req, res) => { res.sendFile(__dirname + "/build/index.html"); }); at the end of the server.js to catch all.

hope this saves some of your time.