How to hide or integrate geolocation permission pop up into a button (Javascript + HTML)

Question

I intend to use the "Allow Access To My Location" button to send a permission request for users' geolocation. Instead of the users clicking on a webpage pop up, which probably doesn't look integrated to the overall web UI. But I can't seem to bypass the pop up like shown in the image below.

IMAGE: pop up window shows up after I clicked on the button

What I would prefer is by having a user to click the button, it will grant permission in one go and by-pass the pop up.

Below are the HTML code for a simple button, and relevant Javascript code to retrieve user's location. Some of the code inside are for other functions, I'm very open to feedback in terms of coding practice etc.

HTML code

<button id = "allow-Geolocation">Allow Access To My Location</button>

Javascript code

        function allowGeolocation() {
            userLocation = new google.maps.InfoWindow();

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(p) {
                    var avatarPosition = {
                        lat: p.coords.latitude,
                        lng: p.coords.longitude
                    };
                    var infoWindowPosition = {
                        lat: avatarPosition.lat + 0.04,
                        lng: avatarPosition.lng
                    };
                    userLocation.setPosition(infoWindowPosition);
                    userLocation.setContent('Your Location');
                    setTimeout(function(){userLocation.close();}, 2000);
                    
                    //set User Avatar
                    userAvatar = new google.maps.Marker({
                        position: avatarPosition,
                        icon: 'https://i.imgur.com/h2tTqOb.png',
                        draggable: true,
                        animation: google.maps.Animation.DROP,
                        map:map
                    });
                    userAvatar.addListener('mouseover', toggleBounce);
                    userAvatar.addListener('dragend', radiusSearch);
                    userLocation.open(map);
                }, function() {
                    handleLocationError('Geolocation service failed', map.center());
                })
            }
            else {
                handleLocationError('No geolocation available', map.center());
            }
        }
        document.querySelector('#allow-Geolocation').addEventListener('click', allowGeolocation);
        

Answer 1

But I can't seem to bypass the pop up like shown in the image below.

That's because you can't.

The browser determines how to present this to the user. You don't have a choice in this. Also, it's important to note that the way it displays varies from platform to platform.