Google maps API, get the users city/ nearest city/ general area

Question

I've been trying to code a function that returns the most reasonable, moderately sized city/ town/ region a person is in or near.

Apps such as yik yak used an algorithim like this to group people together. Is there any existing alogorithims to do this? At the moment I'm using this:

 geocoder.geocode({'latLng': latlng}, function (results, status) {

        var city = 'Unknown';
        if (status == google.maps.GeocoderStatus.OK) {

            var details = results[0].address_components;

            for (var i = details.length-1; i >= 0; i--) {
                for (var j=0; j<details[i].types.length;j++) {

                    if (details[i].types[j] == 'locality') {
                        city = details[i].long_name;
                    } else if (details[i].types[j] == 'sublocality') {
                        city = details[i].long_name;
                    } else if (details[i].types[j] == 'neighborhood') {
                        city = details[i].long_name;
                    }
                }
            }

Which isn't the best. I've just tried to enter these coords: {latitude: 53.4808, longitude: -2.7426}

And got unknown. When looking as the results the geocoder returned, I see Saint Helens would be the most reasonably sized group to put this user in. If that didn't exist, I see Merseysid is also returned which would be the next best thing.

Answer 1

It looks to me like both Saint Helens and Mersyside are in the result from the Reverse Geocoder.

reverse geocoder result:

[
  {"long_name":"Unnamed Road","short_name":"Unnamed Road","types":["route"]},
  {"long_name":"Saint Helens","short_name":"Saint Helens","types":["postal_town"]},
  {"long_name":"Merseyside","short_name":"Merseyside","types":["administrative_area_level_2","political"]},
  {"long_name":"England","short_name":"England","types":["administrative_area_level_1","political"]},
  {"long_name":"United Kingdom","short_name":"GB","types":["country","political"]},
  {"long_name":"WA11","short_name":"WA11","types":["postal_code","postal_code_prefix"]}
]

If you add those types to your if statement, the it will appear in the result:

  for (var i = details.length-1; i >= 0; i--) {
    for (var j=0; j<details[i].types.length;j++) {
      if (details[i].types[j] == 'locality') {
        city = details[i].long_name;
      } else if (details[i].types[j] == 'sublocality') {
        city = details[i].long_name;
      } else if (details[i].types[j] == 'neighborhood') {
        city = details[i].long_name;
      } else if (details[i].types[j] == 'postal_town') {
        city = details[i].long_name;
      } else if (details[i].types[j] == 'administrative_area_level_2') {
        city = details[i].long_name;
      }
    }
  }
  console.log("city="+city);
}

proof of concept fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(53.4808, -2.7426),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
  });
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'latLng': new google.maps.LatLng(53.4808, -2.7426)
  }, function(results, status) {

    var city = 'Unknown';
    if (status == google.maps.GeocoderStatus.OK) {

      var details = results[0].address_components;
      console.log(JSON.stringify(details));
      for (var i = details.length - 1; i >= 0; i--) {
        for (var j = 0; j < details[i].types.length; j++) {
          if (details[i].types[j] == 'locality') {
            city = details[i].long_name;
          } else if (details[i].types[j] == 'sublocality') {
            city = details[i].long_name;
          } else if (details[i].types[j] == 'neighborhood') {
            city = details[i].long_name;
          } else if (details[i].types[j] == 'postal_town') {
            city = details[i].long_name;
            console.log("postal_town=" + city);
          } else if (details[i].types[j] == 'administrative_area_level_2') {
            city = details[i].long_name;
            console.log("admin_area_2=" + city);
          }
        }
      }
      console.log("city=" + city);
      document.getElementById('city').innerHTML = "city=" + city;
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="city"></div>
<div id="map_canvas"></div>