PositionError {code: 1, message: "Only secure origins are allowed ionic3?

Ionic Framework ionic-v3
1

hi,
I’m creating an app in ionic3 that needs to access get current location of the user and load the google map in page but i got the position error in the chrome console :

‘PositionError {code: 1, message: "Only secure origins are allowed?’

i have tried below link but working:

below we have upload our index.html as well as ts function with the help of which we have to load the map.please tell me anyone how to fix this error ?0

<!DOCTYPE html>
<html lang=“en” dir=“ltr”>
<head>
<meta charset=“UTF-8”>
<title>Ionic App</title>
<meta name=“viewport” content=“viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<meta name=“format-detection” content=“telephone=no”>
<meta name=“msapplication-tap-highlight” content=“no”>

<link rel=“icon” type=“image/x-icon” href=“assets/icon/favicon.ico”>
<link rel=“manifest” href=“manifest.json”>
<meta name=“theme-color” content=“#4e8ef7”>

<!-- add to homescreen for ios –>
<meta name=“apple-mobile-web-app-capable” content=“yes”>
<meta name=“apple-mobile-web-app-status-bar-style” content=“black”>
<!-- cordova.js required for cordova apps –>
<script src=“http://maps.google.com/maps/api/js?key=YOUR_API_KEY_HERE”></script>
<script src=“cordova.js”></script>

<!-- un-comment this code to enable service worker
<script>
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘service-worker.js’)
.then(() => console.log(‘service worker installed’))
.catch(err => console.error(‘Error’, err));
}
</script>–>

<link href=“build/main.css” rel=“stylesheet”>

</head>
<body>

<!-- Ionic’s root component and where the app will load –>
<ion-app></ion-app>

<!-- The polyfills js is generated during the build process –>
<script src=“build/polyfills.js”></script>

<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules –>
<script src=“build/vendor.js”></script>

<!-- The main bundle js is generated during the build process –>
<script src=“build/main.js”></script>

</body>
</html>
Run code snippetExpand snippet

    loadMap(){ 
         this.geolocation.getCurrentPosition().then((position) =&gt; { 
       let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
         let mapOptions = { 
            center: latLng, 
            zoom: 15, 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions); 
  }, (err) =&gt; { 
      console.log(err); 
 });   
}