Google Maps JavaScript APIジオロケーションマーカー

Question

GoogleマップJavascript APIによってユーザーの場所が決まるとマーカーが表示されるようにしようとしています。 HTMLを開くと、ユーザーの場所をプルアップすることができますが、ユーザーの所在地を示すマーカーはありません。私は3つのジムの位置を示すいくつかのマーカーを持っていますが、私は彼らが3つのジムに関連している場所をユーザーに示したいと思います。

"var markers ="配列にユーザーの場所を追加する必要がありますか？または、「infoWindow.setPosition（pos）;」の後にいくつかのタイプのコードを追加する必要がありますか？ここまでは私のコードです。

<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

これを試してみてください。注意：あなたの位置を決定するのはGoogleマップではありません。私は標準のHTML/javascript機能を使っています。あなたのウェブブラウザはそれを読みます。

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

の