マップ作成後にユーザーの位置が利用できるコールバック関数のマーカーを設定します

Question

google map.myコードに最も近いホテルを表示する関数を以下に示します。上記の例

var map; 
 

 
    function initMap() { 
 

 
    var latlng = new google.maps.LatLng(28.535516,77.391026); 
 

 
    if (navigator.geolocation) { 
 
     try { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 
      var myLocation = { 
 
      lat: position.coords.latitude, 
 
      lng: position.coords.longitude 
 
      }; 
 
      setPos(myLocation); 
 
     }); 
 
     } catch (err) { 
 
     var myLocation = { 
 
      lat: 25.2048, 
 
      lng: 55.2708 
 
     }; 
 
     setPos(myLocation); 
 
     } 
 
    } else { 
 
     var myLocation = { 
 
     lat: 25.2048, 
 
     lng: 55.2708 
 
     }; 
 
     setPos(myLocation); 
 
    } 
 
    } 
 

 
    function setPos(myLocation) { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
     center: myLocation, 
 
     zoom: 10 
 
    }); 
 
    var service = new google.maps.places.PlacesService(map); 
 
    service.nearbySearch({ 
 
     location: myLocation, 
 
     radius: 4000, 
 
     types: ['hotels'] 
 
    }, processResults); 
 
    } 
 

 
    function processResults(results, status, pagination) { 
 
    if (status !== google.maps.places.PlacesServiceStatus.OK) { 
 
     return; 
 
    } else { 
 
     createMarkers(results); 
 
    } 
 
    } 
 

 
    function createMarkers(places) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var placesList = document.getElementById('places'); 
 
    for (var i = 0, place; place = places[i]; i++) 
 
    { 
 
     var image = { 
 
     url: place.icon, 
 
     size: new google.maps.Size(71, 71), 
 
     origin: new google.maps.Point(0, 0), 
 
     anchor: new google.maps.Point(17, 34), 
 
     scaledSize: new google.maps.Size(25, 25) 
 
     }; 
 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     icon: image, 
 
     title: place.name, 
 
     animation: google.maps.Animation.DROP, 
 
     position: place.geometry.location 
 
     }); 
 

 
     bounds.extend(place.geometry.location); 
 
    } 
 
    map.fitBounds(bounds); 
 
    }

html,body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    #map { 
 
     height: 500px; 
 
     margin: 10px auto; 
 
     width: 800px; 
 
    }

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuBzeYkYimIquGG5KkIcB6vFmtHMUzDFo&libraries=places&callback=initMap" async defer></script> 
 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuBzeYkYimIquGG5KkIcB6vFmtHMUzDFo&libraries=places"></script> 
 

 
<div id="map"></div>

ユーザーの場所周辺のホテルの最寄りの私を返します。しかし、私はにもユーザーの場所のポインタを表示したいと思う。 ここでユーザーの場所を表示するにはどうすればいいですか？

initMap()ユーザーの位置マーカーを表示する機能も追加しようとしていますが、オーバーレイドのホテルアイコンが付いています。だから私はマイクロ秒の最初のページをリフレッシュすると、ユーザーの場所が表示され、ホテルのアイコンよりも優先されます。 ここに上記コードのo/pの画像があります。

Output of Fiddle Snippet

Answer 1

ジオロケーション結果が利用可能であり、マップが作成されてい

proof of concept fiddle

をジオロケーションが失敗したときsetPos機能（にマーカーの作成を追加します。

を

ジオロケーションが動作している場合、現在地が表示されます。

コードスニペット：

var map; 
 

 
function error() { 
 
    console.log("error!") 
 
    var myLocation = { 
 
    lat: 25.2048, 
 
    lng: 55.2708 
 
    }; 
 
    setPos(myLocation); 
 
} 
 

 
function initMap() { 
 

 
    var latlng = new google.maps.LatLng(28.535516, 77.391026); 
 

 
    if (navigator.geolocation) { 
 
    try { 
 
     navigator.geolocation.getCurrentPosition(function(position) { 
 

 
     var myLocation = { 
 
      lat: position.coords.latitude, 
 
      lng: position.coords.longitude 
 
     }; 
 
     setPos(myLocation); 
 
     }, error); 
 
    } catch (err) { 
 
     var myLocation = { 
 
     lat: 25.2048, 
 
     lng: 55.2708 
 
     }; 
 
     setPos(myLocation); 
 
    } 
 
    } else { 
 
    var myLocation = { 
 
     lat: 25.2048, 
 
     lng: 55.2708 
 
    }; 
 
    setPos(myLocation); 
 
    } 
 
} 
 

 
function setPos(myLocation) { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: myLocation, 
 
    zoom: 10 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    position: myLocation, 
 
    map: map, 
 
    title: "My Position" 
 
    }) 
 
    var service = new google.maps.places.PlacesService(map); 
 
    service.nearbySearch({ 
 
    location: myLocation, 
 
    radius: 4000, 
 
    types: ['hotels'] 
 
    }, processResults); 
 
} 
 

 
function processResults(results, status, pagination) { 
 
    if (status !== google.maps.places.PlacesServiceStatus.OK) { 
 
    return; 
 
    } else { 
 
    createMarkers(results); 
 
    } 
 
} 
 

 
function createMarkers(places) { 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var placesList = document.getElementById('places'); 
 
    for (var i = 0, place; place = places[i]; i++) { 
 
    var image = { 
 
     url: place.icon, 
 
     size: new google.maps.Size(71, 71), 
 
     origin: new google.maps.Point(0, 0), 
 
     anchor: new google.maps.Point(17, 34), 
 
     scaledSize: new google.maps.Size(25, 25) 
 
    }; 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     icon: image, 
 
     title: place.name, 
 
     animation: google.maps.Animation.DROP, 
 
     position: place.geometry.location 
 
    }); 
 

 
    bounds.extend(place.geometry.location); 
 
    } 
 
    map.fitBounds(bounds); 
 
}

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
    margin: 10px auto; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script> 
 
<div id="map"></div>