ユーザーの場所に応じてgoogleマップ内のマーカーをソート

Question

マップ（ウェブアプリケーション/サイト）にマーカーとして表示されるイベントのリストがあり、特定の距離（10 KM）からのイベントのみを表示したいしたがって、ユーザーの現在位置は、どのように私はこの2

//User Location 
     if (navigator.geolocation) 
     { 
     navigator.geolocation.getCurrentPosition(
     function (position) { 
      var currentLatitude = position.coords.latitude; 
      var currentLongitude = position.coords.longitude; 
      // alert ("Latitude"+currentLatitude+"Longitude"+currentLongitude);window.mapServiceProvider(position.coords.latitude,position.coords.longitude); 
      // console.log(position); 
     } 

       ); 
     } 


    //List of location from the Db. 
var markers = @Html.Raw(Json.Encode(Model.UpcomingLectureGigs)); 
//Set All merkers on the map 
window.onload = function (a) { 

    var mapOptions = { 
     center: new window.google.maps.LatLng(window.markers[0].Latitude, window.markers[0].Longitude), 
     zoom: 12, 
     mapTypeId: window.google.maps.MapTypeId.ROADMAP 
    }; 
    var infoWindow = new window.google.maps.InfoWindow(); 


    var map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions); 
    for (var i = 0; i < window.markers.length; i++) { 
     var data = window.markers[i]; 

     var myLatlng = new window.google.maps.LatLng(data.Latitude, data.Longitude); 
     // console.log(data.Latitude, data.Longitude); 
     var marker = new window.google.maps.Marker({ 
      position: myLatlng, 
      draggable: true, 
      animation: google.maps.Animation.DROP, 
      get map() { return map; } 
     }); 
     (function (marker, data) { 
      window.google.maps.event.addListener(marker, 
       "click", 
       function (e) { 

        infoWindow.setContent(data 
         .Venue + 
         " " + 
         data.Genre.Name + 
         " " + 
         data.DateTime.toString("dd/mm/yy")); 
        //.toISOString().split("T")[0]); 
        // .format('MM/DD h:mm'); 

        infoWindow.open(map, marker); 
       }); 
     })(marker, data); 
    }; 
}; 

Answer 1

あなたはユーザーの位置とマーカーの間メートルに距離を計算するジオメトリライブラリを使用することができます組み合わせることができます。

https://developers.google.com/maps/documentation/javascript/reference#spherical

マーカーをフィルタリングするためのコードのスナップショットを使用すると、地図のJavaScript APIをロードするときは、ライブラリに=幾何学的パラメータを追加する必要があり

var markers_filtered = markers.filter(function(marker, index, array) { 
    var myLatlng = new window.google.maps.LatLng(marker.Latitude, marker.Longitude); 
    return google.maps.geometry.spherical.computeDistanceBetween(userLatLng, myLatlng) < 10000; 
}); 
for (var i = 0; i < markers_filtered.length; i++) { 
    //Your stuff here 
} 

のようなものかもしれません。

https://developers.google.com/maps/documentation/javascript/geometry