GoogleマップAPI JS V3に最も近い複数のマーカーを30キロメートルの範囲にあるユーザーの現在の位置から表示

Question

ユーザー（顧客）が現在のユーザーから30kmsの範囲にある複数のドライバーのマーカーを表示するモバイルアプリケーションを作成していますポジション。

私は、JSONとJQueryを使用してデータベースに保存されているマルチマーカーを表示できます。また

function multimarker(map) 
{ 
     jQuery.ajax({        
    url: baseurl + "getdriverlocation.php", 
    type: "JSON", 
    async: true, 
    success: function(data){ 
     var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data) 

     jQuery(myArray).each(function(index, element) {  
     driverlat = element.driver_lat; 
     driverlng = element.driver_lng; 
     locations.push([driverlat , driverlng]) 
}); 
    var bounds = new google.maps.LatLngBounds(); 
for (i = 0; i < locations.length; i++) 
       { 

       var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]); 
      drivermarker=new google.maps.Marker({position:latlng1}); 
      drivermarker.setMap(map); 
      var infowindow = new google.maps.InfoWindow(); 
      google.maps.event.addListener(drivermarker, 'click', (function(marker, i) { 
      return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, drivermarker); 

     } 
     })(drivermarker, i)); 
         bounds.extend(latlng1); 
       } 
     map.fitBounds(bounds); 
} 
}); 

} 

今、私は現在の位置から30キロの距離にあるのみマーカーを表示したい同じマップ

function currentpostionmap() 
{ 
     if (navigator.geolocation) { 


        function success(pos) 
     { 
             var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 
       var myOptions = { 
            zoom: 15, 
            center: latlng, 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
        map = new google.maps.Map(document.getElementById("map"), myOptions); 
       var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 

        marker = new google.maps.Marker({ 
            position: latlng, 
            map: map, 
      icon: image123 
         
        }); 
      multimarker(map); 

        } 
        function fail(error) { 
           var latlng = new google.maps.LatLng(18.5204, 73.8567); 
       var myOptions = { 
            zoom: 10, 
            center: latlng, 
            mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 
         map = new google.maps.Map(document.getElementById("map"), myOptions); 
       
         marker = new google.maps.Marker({ 
            position: latlng, 
            map: map 
            
         }); 


        } 
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds 
      navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000}); 
    } 
} 

上の現在位置をプロットすることができ。

それ以外は表示されません。

どうすればよいですか？

Answer 1

マーカーが条件を満たす場合にのみマーカーを地図に追加してください。 geometry libraryを必ず含めてください。

for (i = 0; i < locations.length; i++) { 
    var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]); 
    if (google.maps.geometry.spherical.computeDistanceBetween(latlng1,map.getCenter()) < 30000) { 
    drivermarker=new google.maps.Marker({position:latlng1}); 
    drivermarker.setMap(map); 
    var infowindow = new google.maps.InfoWindow(); 
    google.maps.event.addListener(drivermarker, 'click', (function(marker, i) { 
     return function() { 
     infowindow.setContent(locations[i][0]); 
     infowindow.open(map, drivermarker); 
     } 
    })(drivermarker, i)); 
    bounds.extend(latlng1); 
    } 
} 
map.fitBounds(bounds);