Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 138192

How to set/limit the search radius for google maps/places?

$
0
0

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

Viewing all articles
Browse latest Browse all 138192

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>