谷歌地图 API 在我将 Modal eventListener 添加到标记后停止显示地理位置

Question

I added only Google Maps Script because it is the only part that does not work.

My issue is that I don't understand why the map does not see geolocation (my location). Visual Studio Code does not show any error and map loads but no geolocation. Unfortunately, I can't find the issue either.

<script>

 var myStyles =[
  {
    featureType: "poi",
    elementType: "labels",
    stylers: [
          { visibility: "off" }
    ]
}
];

function initMap() {
var artavenue = new google.maps.LatLng(59.441970, 24.784039),


myOptions = {
    clickableIcons: false,
      center: {lat:59.4370, lng:24.7536},
      zoom: 12,
      styles: myStyles,
      disableDefaultUI: true,
},


map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
infoWindow = new google.maps.InfoWindow;
markerA = new google.maps.Marker({

  position: artavenue,
  title: "Art Avenue 🍽️ 🍣 🍔 🥗 🍝 🍲",
  icon:'art-avenue.png',
  map: map

});
markerA.addListener('click', function(e) {
map.setCenter(this.position);
$(".modal-header .modal-title").text(this.title);
$(".modal-body #modalLatLng").text(this.position);
$('#myModal').modal('show');
 });
markerA = new google.maps.Marker({
  position: pointB,
  title: "Marker A",
  label: "A",
  map: map

});
 markerA.addListener('click', function(e) {
map.setCenter(this.position);
$(".modal-header .modal-title").text(this.title);
$(".modal-body #modalLatLng").text(this.position);
$('#myModal').modal('show');
});
}

I think that something goes wrong from here.

// Try HTML5 geolocation.

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,


 };



var marker = new google.maps.Marker({
position: pos,
map: map,
title: 'Your position',


});
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);
}

Answer 1

It was because I was running page in localhost, thanks to Google Chrome inspect element console I saw the text that now they are not showing your location even if you are in the localhost. So there you go. When the page is live everything works.