Как создать полигон на основе пользовательского ввода места

Question

В основном я хочу создать многоугольник, основанный на поиске пользователем места. Например, если пользователь выполняет поиск (Сектор 56, Гургаон), то как я могу получить координаты многоугольника для поиска пользователей.

Пример, есть этот результат сайта: https://grabhouse.com/seeker/result-6BNN3pbCk

Здесь пользователь выполнил поиск "Сектор 56, gurgaon" и на основе поиска выполняет следующие действия (показанные свойством "inspect element"):

• Получите лат долгого поиска
• Получить координаты многоугольника
• на основе координат многоугольника показать свойства, лежащие в этом многоугольнике.

Как сделать то же самое?

Answer 1

<style>#map_canvas {height: 400px;}</style>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geocoder"></script>
<input type="text" id="search_address" value=""/>
<button onclick="search();">Search</button>
<hr>
<input id="display" placeholder="coordinates"/>
<script>
var geocoder;
var polygonPoints = [];
var polygonObject;
var markers = [];  // marker objects

function initialize() {
  geocoder = new google.maps.Geocoder();
  var myCenter = new google.maps.LatLng(50.5, 4.5);
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: myCenter
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function search() {
  geocoder.geocode(
    {'address': document.getElementById("search_address").value}, 
    function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
        var location = results[0].geometry.location;
        // let's add that point to the polygon
        addPointToPolygon(location);
        // add a marker there.  Feel free to delete next line, if you don't want a marker there
        markers.push(newMarker(location, map));
        // center map on that point
        map.setCenter(location);
        // display the points in an text element (input)
        displayPoints(polygonPoints);
        // make sure the map shows all the points
        fitBounds(polygonPoints, map);
      } 
    }
  );
};

function addPointToPolygon(location) {
  // add the point to the array
  polygonPoints.push(location);
  // a polygon must have 3 points or more
  if(polygonPoints.length >= 3) {
    // first destroy the previous polygon (with 1 fewer point)
    if(polygonObject) {
      polygonObject.setMap(null);
    }
    // new polygon
    polygonObject = polygon(polygonPoints, map);
  }
}

// returns a polygon object
function polygon(points, map) {
  // Construct the polygon.
  return new google.maps.Polygon({
    paths: points,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });  
}

function newMarker(location, map) {
  return new google.maps.Marker({
    position: location,
    map: map
  });
}

function displayPoints(locations) {
  for (var i in locations) {
    document.getElementById("display").value += locations[i].lat() +','+ locations[i].lng() +' ; ';
  }
}

function fitBounds(locations, map) {
  // only fit bounds after 2 or more points.
  if (locations.length < 2) {
    return false;
  }
  var bounds = new google.maps.LatLngBounds();
  for (var i in locations) {
    bounds.extend(locations[i]);
  }
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>