Now let us start with the coding part, HTML has 2 div. I will explain about this later.

<div id="location"></div>
<div id="map"></div>

We have 4 Javascript functions,

getLocation() will check whether browser supports navigator.geolocation function. If it doesn’t then browser will display a message “Geolocation is not supported by this browser”

Else it will call the next function named showPostion() from where it displays Longitude & Latitude inside div which has the ID named as “location”.

Since we now know the Latitude and Longitude we are good to pass it to google map to display the location and that is done by passing values to mymap function like this mymap(lat,lon).

I am using geocodeLatLng() to show the city name from where your user is accessing the website. Google map will be displayed in the div section with ID named as “map”.

var x = document.getElementById("location");
function getLocation() {
document.getElementById('map').innerHTML = "Loading Map..Please Be Patient.."
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude;
var lat = position.coords.latitude;
var lon = position.coords.longitude
document.getElementById("latlng").value = lat+", "+lon;
mymap(lat,lon)
}
function mymap(a,b) {
var myLatLng = {lat: a, lng: b};

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: myLatLng
});

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'My Location'
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
geocodeLatLng(geocoder, map, infowindow);

}

function geocodeLatLng(geocoder, map, infowindow) {
var input = document.getElementById('latlng').value;
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}

Last step is to add a button along with the Google Maps API.

Note: I am using my own API here. Please make sure that you use yours as without the API this script might not work as expected.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBx9KK3TCaeEVlNiMHVFD3pWzGqz2pI3cE"
        async defer></script>
		<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Get Your Location</button>
 <div id="floating-panel">
      <input style="display:none" id="latlng" type="text" value="">
      
    </div>

DEMO