I want to embed a map into a React website without exposing my Google Maps JavaScript API key to users.
I'm using the 'react-google-maps-api' library (v2.18.1) as a wrapper around the Google Maps JavaScript SDK.
To create the map, you need to pass your API key to one of the above external libraries. If using the wrapper library you do it this way, and if just using plain JavaScript you do it this way.
Based on what I've read here and here it seems that I should not store the API key in my frontend and should instead store it on my backend and do the API calls from there and pass the data on to my frontend.
That sounds like reasonable advice for calling a normal API that just returns JSON data or something like that.
What confuses me is how I'm meant to pass the data from the frontend to the backend if I don't know exactly what I'm getting back from the API call to Google?
Should I run a Node/Express backend, do the API call there, create the React component there and serialize it somehow before passing it to my frontend which then de-serializes it and renders it?
Even if all of that worked, would users be able to interact with the map as usual once it was rendered? Could I use web sockets somehow to increase performance?
How would I go about serializing it (if that was the right method)?
I've tried sending the API key from the backend to the frontend and then just using it directly, however that doesn't seem particularly secure and I can't even get it to work that way (which is a separate problem).
