Google Maps JavaScript API地理位置标记

Question

Im am trying to make it so that a marker appears when my Google Maps Javascript API determines user location. When I open my HTML, it is able to pull up the user's location but there is no marker showing the user where they are located. I have several markers that show the location of 3 gyms but I want to show the user where they are in relation to the three gyms.

Should I add the user's location in the "var markers =" array? Or should I add some type of code after the "infoWindow.setPosition(pos);"? Here is my code so far;

<script>
  var map, infoWindow;
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat:34.0522,lng:-118.2437},
      zoom: 15,
      disableDefaultUI: true,
      gestureHandling: 'cooperative',
    });
    infoWindow = new google.maps.InfoWindow;

  if (navigator.geolocation) {

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

      infoWindow.setPosition(pos);

    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
     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);  }

    var markers = [
                  {
                    coords:{lat:34.051937,lng:-118.472118},
                    iconImage:'GymBoxNBurn.png',
                    content:'Box N Burn Boxing Gym'
                  },
                  {
                    coords:{lat:33.938454,lng:-118.277857},
                    iconImage:'GymBroadwayBoxing.png',
                    content:'Broadway Boxing Gym'
                  },
                  {
                    coords:{lat:34.015644,lng:-118.487396},
                    iconImage:'GymBoxNBurn.png',
                    content:'Box N Burn Boxing Gym'
                  }
                ];


    for(var i = 0;i < markers.length;i++){
        addMarker(markers[i]);
          }

            function addMarker(props){
              var marker = new google.maps.Marker({
                position:props.coords,
                map:map,
              });


              if(props.iconImage){
                marker.setIcon(props.iconImage);
                }

              if(props.content){
                var infoWindow = new google.maps.InfoWindow({
                  content:props.content
                  });

                  }
                }
              };

Answer 1

try this. Notice: it's not Google Maps that determines your position. I'ts standard HTML/javascript functionality; your webbrowser reads it.

...
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
  };
  infoWindow.setPosition(pos);
  addMarker({
    coords: pos,
    content:'YOU ARE HERE'
  });  
  // if you want this, center the map.  Else remove next line
  map.setCenter(pos);          
}, 
...