Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get LatLngBounds of feature polygon geometry in google maps v3?

I have a lot of polygonal features loaded with loadGeoJson and I'd like to get the latLngBounds of each. Do I need to write a function that iterates through every lat long pair in the polygon and does an extend() on a LatLngBounds for each, or is there a better way? (If not, I can probably figure out how to iterate through the polygon vertices but pointers to an example of that would be welcome)

like image 327
Lucas W Avatar asked Jun 25 '14 06:06

Lucas W


People also ask

How do I extract a polygon from Google Maps?

Assuming you have a Google account, creating a map is explained here and by using draw a line tool, you can create polygons. Even though it says line, the sub menu says Add line or shape and closing your line will create a polygon. Once you finish your map, in the map options, you will find Export to KML.

How do I calculate the area of a polygon in Google Maps?

Right-click on the map at your starting point and choose the Measure distance option. Add points around the location's boundary. Once you close the shape by clicking on the starting point, the Google Maps area calculator will automatically process the area of your shape.

What is Google Maps Latlngbounds?

An immutable class representing a latitude/longitude aligned rectangle.

What is a polygon in Google Maps?

google.maps.Polygon class. A polygon (like a polyline) defines a series of connected coordinates in an ordered sequence. Additionally, polygons form a closed loop and define a filled region. See the samples in the developer's guide, starting with a simple polygon, a polygon with a hole, and more.

How to get latitude and longitude in Google Maps API v3?

In Google Maps API v2, to get them, you will do something like this: var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); But in API v3 you will get “bounds is undefined” error. So to get our latitude and longitude we need to move getBounds(), to some event listener.

How to access polygons in a data-layer?

1 In a data-layer there is no way to access the shapes(e.g. polygons) that have been drawn, you only may access the features. The problem: the features are not available as array(then it would be easy to iterate over the features or select a feature by index) Possible solution:

Is it possible to plot a map to display beacons and geofences?

This feature was quite challenging and required me to use things I haven’t used for a long time! One of the things I had to do was plotting a map to display the Beacons and Geofences of a certain customer. The scope was pretty simple in our case as Geofences were always polygons or circles, while the beacons were represented by markers.


2 Answers

The Polygon-features doesn't have a property that exposes the bounds, you have to calculate it on your own.

Example:

   //loadGeoJson  runs asnchronously, listen to the addfeature-event
   google.maps.event.addListener(map.data,'addfeature',function(e){

      //check for a polygon
      if(e.feature.getGeometry().getType()==='Polygon'){

          //initialize the bounds
          var bounds=new google.maps.LatLngBounds();

          //iterate over the paths
          e.feature.getGeometry().getArray().forEach(function(path){

             //iterate over the points in the path
             path.getArray().forEach(function(latLng){

               //extend the bounds
               bounds.extend(latLng);
             });

          });

          //now use the bounds
          e.feature.setProperty('bounds',bounds);

        }
  });

Demo: http://jsfiddle.net/doktormolle/qtDR6/

like image 125
Dr.Molle Avatar answered Sep 25 '22 05:09

Dr.Molle


In Google Maps JavaScript API v2, Polygon had a getBounds() method, but that doesn’t exist for v3 Polygon. Here’s the solution:

if (!google.maps.Polygon.prototype.getBounds) {
    google.maps.Polygon.prototype.getBounds = function () {
        var bounds = new google.maps.LatLngBounds();
        this.getPath().forEach(function (element, index) { bounds.extend(element); });
        return bounds;
    }
}
like image 33
Kristopher Avatar answered Sep 25 '22 05:09

Kristopher