Location of the users logging in to the website via Geolocation and Javascript API, but violation errors - google-geolocation

Question

Trying to access the locations of the users logging in to a website using Google's Geolocation and Javascript API. But it's giving me violation errors.
THE HTML File
<script>
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap">
</script>
EXPRESSJS
const express=require('express');
const path = require('path');
const app=express();
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, './geo.html'));
})
const port =8081;
app.listen(port,()=>{
console.log(`App running on ${port}`);
})
The Webpage is asking for my location and then throwing these following violation warnings:
[Violation] Only request geolocation information in response to a user gesture.
initMap # geo.html:20
(anonymous) # js?key=AIzaSyCZoELufy8fp9Vg4jGAAwAtDz0f8UJuxzc&callback=initMap:142
(anonymous) # js?key=AIzaSyCZoELufy8fp9Vg4jGAAwAtDz0f8UJuxzc&callback=initMap:142
util.js:45 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
(anonymous) # util.js:45
Nz # util.js:45
_.zE # util.js:134
LW # onion.js:30
(anonymous) # onion.js:35
util.js:45 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
can you help me solve this

Answer 1

Google has a recommendation that you don't ask for the users location on page load:
Users are mistrustful of or confused by pages that automatically request their location on page load. Rather than automatically requesting a user's location on page load, tie the request to a user's gesture, such as a tapping a "Find Stores Near Me" button. Make sure that the gesture clearly and explicitly expresses the need for the user's location.
You should add a button that gives some information to the user for why you need the location first, and then ask. This way users know why you need it.