How to find and show all POIs with Google Maps API v3 within a certain radius?

Question

I'm facing a problem that (in my case) not all bakeries are shown in the example code though Google definitely knows about them since I find them in other searches.

For example, the two bakeries at 52.543770, 13.441250 are not shown though they're within the specified radius. Why is this and how to fix it? I want to find all bakeries that Google knows of and not just a part of it.

<!DOCTYPE html>
<html>
  <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script>
var map;
var infowindow;

function initMap() {
  var berlin = {lat: 52.540, lng: 13.430};

  map = new google.maps.Map(document.getElementById('map'), {
    center: berlin,
    zoom: 15
  });

  infowindow = new google.maps.InfoWindow();

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: berlin,
    radius: 2000,
    types: ['bakery']
  }, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

    </script>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&libraries=places&callback=initMap" async defer></script>
  </body>
</html>

score 2 · Accepted Answer · edited May 23 '17 at 10:33

By default google shows 20 results per category. If you want more than 20 results that is you need to access all the results, you can use the pagination parameter of the placesService callback function.

So your callback will be modified to:

function callback(results, status, pagination) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
    if (pagination.hasNextPage)
        pagination.nextPage();
  }
}

This will show all the results at once.

pagination.nextPage(); will call the callbackfunction again with new set of results.

You can refer to the Google Maps Pagination example

Note: Doing this may cause your map to be crowded with markers and thus hurting the usability. Instead of showing all the markers at once, implement a More button feature as shown in Google Maps Pagination example.

Edit: You can also use the rankBy: google.maps.places.RankBy.DISTANCE property in your request object to get the nearest results first.

Edit2: Also modify your request object by removing the radius property and adding rankBy property to:

service.nearbySearch({
    location: berlin,
    types: ['bakery'],
    rankBy: google.maps.places.RankBy.DISTANCE
}, callback);

This will show your Lila Backer bakery result. The places is listed correctly under bakery

Note that you may get more than intended results since radius has been removed. You can still handle the radius manually by calculating the distance from the searched location to place by using Haversine formula and manually discard places that fall outside radius. :)

This is a great answer, it seems to work though I found bakeries like [this](https://www.google.com/maps/place/Lila+B%C3%A4cker/@52.543802,13.441251,21z/data=!4m5!3m4!1s0x0:0x89c2448a69a1423f!8m2!3d52.5438009!4d13.4412414?hl=de-DE) that are still not shown. Thanks anyway! — JohnnyFromBF, May 06 '16 at 09:01
I checked myself manually and the result is not shown. The only possible reason for this could be that _Lila Backer_ might not be registered under category `bakery` but it might be registered under some other category such as `restaurant` — ihimv, May 06 '16 at 09:09
Hmm could be, but it is shown when I search for bakery manually. Anyway you gave the correct answer, very much appreciated! — JohnnyFromBF, May 06 '16 at 09:13

How to find and show all POIs with Google Maps API v3 within a certain radius?

1 Answers1