Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps API - Radius search for markers using Places?

I have set up a Google Map using API v3. The map has a number of markers with infoboxes attached. I am looking to set up a search box outside of the map for the user to input an address and then have the nearest markers returned based on the distance away (such as a radius search).

From the API documentation I think I need to uses the Places services. Can anyone point me in the right direction?

like image 451
wowzimmer Avatar asked Aug 21 '13 18:08

wowzimmer


People also ask

Can I search within a radius on Google Maps?

Start your search by entering an address and then clicking search. This will find the most relevant businesses, and attractions within the radius provided and show the top 20 of them on a google map. You can change the radius of the search to find businesses farther or closer to the address you enter.

How do I get a list of places on Google Maps API?

Go to the Google Cloud Console. Click the Select a project button, then select the same project you set up for the Maps JavaScript API and click Open. From the list of APIs on the Dashboard, look for Places API. If you see the Places API in the list, it's already enabled.

How do I use marker clusters in Google Maps?

To navigate, press the arrow keys. The number on a cluster indicates how many markers it contains. Notice that as you zoom into any of the cluster locations, the number on the cluster decreases, and you begin to see the individual markers on the map. Zooming out of the map consolidates the markers into clusters again.


1 Answers

To do a radius search with the API, use the Geometry Library google.maps.geometry.spherical.computeDistanceBetween method to calculate the distance between each marker and the geocoded result from the address. If that distance is less than the requested radius, show the marker, else hide it.

code assumes:

  1. array of google.maps.Markers called gmarkers
  2. google.maps.Map object called map

    function codeAddress() {
      var address = document.getElementById('address').value;
      var radius = parseInt(document.getElementById('radius').value, 10)*1000;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
          });
          if (circle) circle.setMap(null);
          circle = new google.maps.Circle({center:marker.getPosition(),
                                         radius: radius,
                                         fillOpacity: 0.35,
                                         fillColor: "#FF0000",
                                         map: map});
          var bounds = new google.maps.LatLngBounds();
          for (var i=0; i<gmarkers.length;i++) {
            if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),marker.getPosition()) < radius) {
              bounds.extend(gmarkers[i].getPosition())
              gmarkers[i].setMap(map);
            } else {
              gmarkers[i].setMap(null);
            }
          }
          map.fitBounds(bounds);
    
        } else {
          alert('Geocode was not successful for the following reason: ' + status);
        }
      });
    }
    

example

like image 106
geocodezip Avatar answered Sep 20 '22 11:09

geocodezip