How to create polygon based on user input of a place

Question

Basically I want to create a polygon based on user search of a place. For example, if a user searches (Sector 56, Gurgaon) then how can I get the polygon coordinates for the users search.

Example, there is this site result: https://grabhouse.com/seeker/result-6BNN3pbCk

Here, the user has searched for "Sector 56, gurgaon" and based on the search it does the following things (shown by "inspect element" property):

Get lat long of the search
Get polygon coordinates
based on the polygon coordinates show the properties lying in that polygon.

How to do the same?

How and where do you plan on saving/storing these coordinates? php/mySQL database? Also, a polygon shouldn't be a problem, but making that polygon closed is something different. When you draw random points on a piece of paper, you get something like a star, with spikes. Simplified example: you could get a pentagram; while you need a pentagon. That's an extra problem. — Emmanuel Delay, Sep 25 '15 at 10:04
can store the coordinates in mongodb. pentagram and pentagon is a smaller problem for my use case and am fine with star and spikes. The main problem is how to get the polygon coordinates. Please check the link which i have shared in the question . I need to make similar polygon for the mentioned search. But I dont know how to fetch the coordinates of that area. — user2129794, Sep 25 '15 at 12:33

score 0 · Answer 1 · answered Sep 25 '15 at 14:36

<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>

OP meant he wants boundary coordinates of the result place. For example, if a user searches "New York", then the OP wants to retrieve the coordinates defining the polygon for "New York". `results[0].geometry.location` returns only a single lat-lng pair, not all the pairs defining the polygon. — Haywire, Sep 26 '15 at 08:16

How to create polygon based on user input of a place

1 Answers1