javascript geolocation api problems

I’m fairly new to Javascript and I’m having problems using the geolocation api.  All the sample code I’ve seen uses javascript to output the longitude and latitude locations to HTML.  However, I want to use the geolocation api and feed the current location longitude and latitude data into google maps and use this to in the maps options to centre my map.  The problem I’m having is trying to extract the position.coords.latitude and position.coord.longitude data out of the showLocation function.  I’ve tried creating a global variable to hold this information but I can’t seem to use this data outside of the showLocation function.  The code below shows my attempt to output longitude and latitude to text boxes.  This works and displays cords, however I can’t feed this back into the google maps API.  also I’m struggling to understand what the showLocation(position) argument is and why is it necessary.  Any help would be much appreciated.

many thanks

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>

<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>

</head>

<body>
<div class=“container”>
<div class=“jumbotron text-center”>
<h1>Title</h1>
<p>Subtitle</p>
</div>
<div class=“row”>

<!-- This will be the search banner. It will include search options to allow
a student to search for local assessment centres and available appointments
within a timeframe. -->

<div class=“col-md-12” style=“background-color:lavender;”>
<button onclick=“getLocation()”> Current position </button>
<form>
longitude: <br> <input id=“longitude” type=“text” value="-3.1778748"> <br>
latitude: <br> <input id=“latitude” type=“text” value=“51.5896435”>
<!-- <p id=“geolocation”> Geolocation: </p> -->
</form>

</div>

<div class = “row”>
<div class=“col-md-6”>
<h3> Nearest Centres </h3>
<p> this is where the list of assesment centre which are closest will be displayed. </p>
</div>
<div class =“col-md-6”>
<div id=“map” class=“map-container” style=“height:400px;”></div>

</div>

<div class = “row”>
<div class=“col-md-12” style=“background-color:lavender; height:200px;”>
<p> This is where all available appointments will be displayed and can be slected.</p>
</div>
<div>

<script src=“https://maps.googleapis.com/maps/api/js?key=MY_CODE&callback=initMap
async defer> </script>
<script type=“text/javascript”>
var map;
var myLocation;
myLocation = new Myposition(51.4896435,-3.1778748);

function Myposition(latitude,longitude){
this.lat = latitude;
this.lng = longitude;
}

function getLocation(){
if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showLocation);
document.getElementById(“geolocation”).innerHTML += myLocation;
}
else {
document.getElementById(“geolocation”).innerHTML += “OFF”;
}
}

function showLocation(position){
maplong = position.coords.longitude;
maplat = position.coords.latitude;
document.getElementById(“longitude”).value = maplong;
document.getElementById(“latitude”).value = maplat;
}

// Set myLocation to current location using geolocation function.

function initMap () {
map= new google.maps.Map(document.getElementById(‘map’), {
center: myLocation, zoom: 10
});
}
</script>

</div>

</div>

</div>

</body>

</html>

on my current location.  However attempts to 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container">
<div class="jumbotron text-center">
<h1>Title</h1>
<p>Subtitle</p>
</div>
<div class="row">

<!-- This will be the search banner. It will include search options to allow
a student to search for local assessment centres and available appointments
within a timeframe. -->

<div class="col-md-12" style="background-color:lavender;">
<button onclick="getLocation()"> Current position </button>
<form>
longitude: 
 <input id="longitude" type="text" value="-3.1778748"> 

latitude: 
 <input id="latitude" type="text" value="51.5896435">
<!-- <p id="geolocation"> Geolocation: </p> -->
</form>

</div>


<div class = "row">
<div class="col-md-6">
<h3> Nearest Centres </h3>
<p> this is where the list of assesment centre which are closest will be displayed. </p>
</div>
<div class ="col-md-6">
<div id="map" class="map-container" style="height:400px;"></div>

</div>

<div class = "row">
<div class="col-md-12" style="background-color:lavender; height:200px;">
<p> This is where all available appointments will be displayed and can be slected.</p>
</div>
<div>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_CODE&callback=initMap"
async defer> </script>
<script type="text/javascript">
var map;
var myLocation;
myLocation = new Myposition(51.4896435,-3.1778748);

function Myposition(latitude,longitude){
this.lat = latitude;
this.lng = longitude;
}

function getLocation(){
if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showLocation);
document.getElementById("geolocation").innerHTML += myLocation;
}
else {
document.getElementById("geolocation").innerHTML += "OFF";
}
}

function showLocation(position){
maplong = position.coords.longitude;
maplat = position.coords.latitude;
document.getElementById("longitude").value = maplong;
document.getElementById("latitude").value = maplat;
}





// Set myLocation to current location using geolocation function.


function initMap () {
map= new google.maps.Map(document.getElementById('map'), {
center: myLocation, zoom: 10
});
}
</script>

</div>

</div>

</div>

</body>
</html>