Get between streets in Google Maps

Question

I have a coordinate and I need to get the streets name that are between this point.

For example, I get the point "Manuela Pedraza 3050" (or geolocation, doesn't matter) and I need to retrieve the values "Zapiola" and "Conesa".

Is this possible?

Answer 1

Concept:

1. create a circle of 8 (as an arbitrary number) of points at 100 meters from your point of interest.
2. get directions from your point of interest to each of those points (you will probably need to use walking directions in that area as the streets are one way).
3. analyze the results for the 2 nearest cross streets
4. remove duplicate streets (as of 2/25/2019 different directions on the same street are at different distances)

Note that the analysis below depends on the text in the instructions returned by the directions service. As written it will only work for English and not necessarily everywhere. That said, it does currently seem to work for your area of interest as well as Palo Alto CA and New York NY.

demo fiddle

code snippet:

var geocoder;
var map;

function initialize() {
  var pointOfInterest = new google.maps.LatLng(-34.5548, -58.4720282);
  // var pointOfInterest = new google.maps.LatLng(37.439913,-122.141229);
  // var pointOfInterest = new google.maps.LatLng(40.715898,-74.006843);
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: pointOfInterest,
      zoom: 18,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var marker = new google.maps.Marker({
    position: pointOfInterest,
    map: map
  })
  geocoder = new google.maps.Geocoder();
  // "Manuela Pedraza 3050, C1429CCX CABA, Argentina"
  var circlePts = drawCircle(pointOfInterest, 100, 1);
  var maneuverArray = [];
  var results = 0;
  for (var i = 0; i < circlePts.length; i++) {
    var mark = new google.maps.Marker({
      position: circlePts[i],
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      }
    });
    var ds = new google.maps.DirectionsService();
    var request = {
      origin: pointOfInterest,
      destination: circlePts[i],
      travelMode: google.maps.TravelMode.WALKING
    }
    ds.route(request, function(result, status) {
      results++;
      if (status == google.maps.DirectionsStatus.OK) {
        var dr = new google.maps.DirectionsRenderer({
          map: map,
          preserveViewport: true
        });
        dr.setDirections(result);
        var distance = 0;
        for (var j = 0; j < result.routes[0].legs.length; j++) {
          for (var k = 0; k < result.routes[0].legs[j].steps.length; k++) {
            if (result.routes[0].legs[j].steps[k].distance.value) {
              distance += result.routes[0].legs[j].steps[k].distance.value;
            }
            console.log("leg:" + j + " step:" + k + " dist=" + distance + " manuever:" + result.routes[0].legs[j].steps[k].maneuver);
            maneuverArray.push({
              manuever: result.routes[0].legs[j].steps[k].maneuver,
              distance: distance,
              step: result.routes[0].legs[j].steps[k]
            });
          }
        }
      } else {
        alert("directions request failed:" + status);
      }
      if (results == circlePts.length) {
        analyzeResults(maneuverArray);
      }
    });
  }
}

function analyzeResults(maneuverArray) {
  maneuverArray.sort(function(a, b) {
    return (a.distance - b.distance)
  });
  var crossStreet = [];
  for (var i = 0; i < maneuverArray.length; i++) {
    if (maneuverArray[i].maneuver != "") {
      crossStreet.push(maneuverArray[i].step);
    }
  }
  // only unique points
  var uniqueXstreets = [];

  for (i = 0; i < crossStreet.length; i++) {
    var j = 0;
    for (; j < uniqueXstreets.length; j++) {
      if (google.maps.geometry.spherical.computeDistanceBetween(crossStreet[i].end_location, uniqueXstreets[j].end_location) < 1) break;
      uniqueXstreets.push(maneuverArray[i].step);
      var mark = new google.maps.Marker({
        map: map,
        position: maneuverArray[i].step.end_location,
        title: "xstreet " + i + " " + maneuverArray[i].step.maneuver
      });
    }
    if (j == uniqueXstreets.length) {
      uniqueXstreets.push(maneuverArray[i].step);
      var mark = new google.maps.Marker({
        map: map,
        position: maneuverArray[i].step.end_location,
        title: "xstreet " + i
      });
    }
    if (uniqueXstreets.length == 4) break;
  }
  var xStreetMap = {};
  for (i = 0; i < uniqueXstreets.length; i++) {
    // document.getElementById('maneuver').innerHTML += uniqueXstreets[i].instructions + "<br>"; 
    var xStreet = uniqueXstreets[i].instructions.substr(uniqueXstreets[i].instructions.indexOf("toward") + "toward".length + 1);
    if (!xStreetMap[xStreet]) {
      document.getElementById('maneuver').innerHTML += xStreet + "<br>";
      console.log("[" + i + "]:" + uniqueXstreets[i].end_location.toUrlValue(6));
      xStreetMap[xStreet] = xStreet;
    }
  }
}

google.maps.event.addDomListener(window, "load", initialize);

function drawCircle(point, radius, dir) {
  var d2r = Math.PI / 180; // degrees to radians 
  var r2d = 180 / Math.PI; // radians to degrees 
  var earthsradius = 6.371e6; // 6.371e6 is the radius of the earth in meters

  var points = 8;

  // find the radius in lat/lon 
  var rlat = (radius / earthsradius) * r2d;
  var rlng = rlat / Math.cos(point.lat() * d2r);


  var extp = new Array();
  if (dir == 1) {
    var start = 0;
    var end = points + 1
  } // one extra here makes sure we connect the
  else {
    var start = points + 1;
    var end = 0
  }
  for (var i = start;
    (dir == 1 ? i < end : i > end); i = i + dir) {
    var theta = Math.PI * (i / (points / 2));
    ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta) 
    ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta) 
    extp.push(new google.maps.LatLng(ex, ey));
    // bounds.extend(extp[extp.length - 1]);
  }
  // alert(extp.length);
  return extp;
}

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<h3>Cross Streets</h3>
<div id="maneuver"></div>
<div id="crossStreets"></div>
<div id="map_canvas"></div>