react-google-maps | React.js Google Maps integration component | Map library

I am using @react-google-maps/api to show Google Map in my React Web application. Following their documentation I have added the marker as follows.

...

I'm using @react-google-maps/api to show a few markers in a map.

I want to add another marker on button click, and when the marker has been added, I want the map to be centered so it shows all the markers. According to this, this is what I wrote:

I am using the @react-google-maps/api package. I get the midpoint with onCenterChanged. My problem here is that every time the user drags it gives me the midpoint. Is it possible for me to get the midpoint as soon as the user releases their drag? I will send a fetch request and get results. According to the current system, it constantly sends requests in each movement.

I have a simple next.js app with two pages, index.js and results.js. The index page has two Location AutoComplete fields which return the address and LatLng of a location after a user selects it from the dropdown of reccomended locations. Once returned, this data is stored in a variable called markers on the index page. When the user clicks the Get Results button on the index page, I'm attempting to pass the address and LatLng data to the results page, so that the selected locations can be shown as a markers on the map.

I've been attempting to do this on and off for about a week now and I can't figure out how to achieve what I want. I feel that there should be a super simple way to do this but I just can't figure it out. I've tried things like:

• Passing the data thorough request parameters on a button click, but the link is generated based on the variables value when the page renders rather than being updated when the variable is updated
• Having the map on the same page as the location autocomplete and attempting to use state to automatically reload the map, which didn't seem to work at all for me
• I've also looked into Redux but this seems to be way too complicated to simply pass an object/it's data from one page to another

My ideal solution is a simple way to pass the data from indext to results. It's probably also worth pointing out that I'm new to React/Next.js so I might be going about all of this the wrong way, and once this is working I'll also be adding in an API call to get directions between the two LatLng points which will also be displayed on the map on the results page.

index.js (simplified)

I am following a tutorial from Leigh Halliday about Google Maps in react. I am deviating slightly, as I need the map for different purposes than he is demonstrating.

Here is my code so far:

I'm at a loss. react-router-dom does not work for me. The application is not redrawn when changing the address in the url. For some time I looked for this error on the Internet and made sure that everything should work for me. Moreover, everything works on my last project with identical routing settings.

What I'm talking about. I have two routes:

I have a component where i get the distance from one point to another, with Google Maps (DirectionsRenderer).

What i want, is to use this data in a h1

TLDR: Sorry for the longest question in history, but I hope this is comprehensive for any users having a similar problem. My app deploys successfully from cloud shell to my domain; however, when I try cloud build, I get Cannot find module '/workspace/server.js' The error likely has to due with my build handlers in the app.yaml, or something to do with my cloudbuild.yaml.

Solution: use the right handlers in app.yaml standard and properly set up your cloudbuild.yaml

I am having trouble using App Engine and Cloud Build together. I am using Cloud Build to set up CICD with my Github repo. I think the issue is due to the fact that I have been not been deploying the production build to app engine. I was able to successfully deploy manually (dev version) with:

gcloud app deploy

Now, I am having trouble with my Cloud Build. In particular, I am trying to run flex environment, but I keep getting "Neither "start" in the "scripts" section of "package.json" nor the "server.js" file were found." But my package.json has a startup script?

I also tried standard environment instead of flex, but I couldn't get the handlers figured out. I tried dozens of examples. I have included the standard environment app.yaml so you can see it.

Here's my package.json:

I use the react-google-maps StandaloneSearchBox and query the locations of my points of interest. This works as far as it goes. However, I get back functions for the location and not the actual value. How do I actually get the lat and lng values similar to the viewport.