I would like to let users fill in a form (which consists of a set of input boxes for username, password, birthdate, etc) and at the bottom of the page, the last input allows them to select their location on google maps (either automatically or manually). The problem occurs when user scrolls down to the bottom of the page where they see google map in a box. After they pin point their location, if they want to scroll back up in the page (for example to change the username they have already entered), they might have difficulty to do so, because when they put their finger on the screen and swipe down to go up in the page, it's google maps screen that moves, not the page! So they have to be careful not touch the map area to scroll up. How can I deal with this?
Use some form elements to interact with the map or use a button to confirm that the location selection is done so the interaction focus gets out of the map.
Here's Uber example - they do it well:
Place a small button/icon on the map that reads 'Go to top', this will take the focus away from map and users won't have a difficulty in scrolling.