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

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.