I'm currently integrating google maps into my project. I want to limit my search radius from my current location up to 5km max only.
here is the code:
the initMap and get user location code
x = navigator.geolocation;
x.getCurrentPosition(success);
var map, infoWindow;
//initmap function
function success(position){
var options = {
center: position,
zoom: 15,
radius: 5000
};
//gets the exact the location of the user
map = new google.maps.Map(document.getElementById('map'), options);
infoWindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (p) {
var position = {
lat: p.coords.latitude,
lng: p.coords.longitude
};
var marker = new google.maps.Marker({map:map, position:position});
infoWindow.setPosition(position);
infoWindow.setContent('Your location!');
infoWindow.open(map);
map.setCenter(position);
}, function () {
handleLocationError('Geolocation service failed', map.getCenter());
});
} else {
handleLocationError('No geolocation available.', map.getCenter());
}
the code below gets the places searched by the user within their vicinity but it currently searches over 5km
//gets the places searched by the user within their vicinity but over 5km
var input = document.getElementById('search');
var searchBox = new google.maps.places.SearchBox(input);
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
var markers = [];
searchBox.addListener('places_changed', function () {
var places = searchBox.getPlaces();
if (places.length == 0)
return;
markers.forEach(function (m) { m.setMap(null); });
markers = [];
var bounds = new google.maps.LatLngBounds();
places.forEach(function(p) {
if (!p.geometry)
return;
markers.push(new google.maps.Marker({
map: map,
title: p.name,
position: p.geometry.location,
icon: {url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"}
}));
if (p.geometry.viewport)
bounds.union(p.geometry.viewport);
else
bounds.extend(p.geometry.location);
});
map.fitBounds(bounds);
});