How to get user's shape from Google Maps JavaScript API V3 and analyze it

Question

On the project I am currently working, I am asking the user to search for a location on a map. When user finds the location, he/she needs to draw a rectangle on the area that he needs information about. How can I get the shape(rectangle) that is drawn on the map as object for example, so I can use the methods getNorthEast() , getSouthWest() and get the proper coordinates of the object?

What I have been trying is this:

 google.maps.event.addListener(drawingManager, 'dragend', function(e) { if (e.type == google.maps.drawing.OverlayType.RECTANGLE) { // Send bounds. var rectangleShape = e.overlay; rectangleShape.type = e.type; // var coordinate = rectangleShape.getNorthEast(); -- Won't allow me to use it. // var coordinate = rectangleShape.getBounds().getNorthEast(); -- Won't allow me to use it too. } }); 

But, as I have written in the code, it won't allow me to use those methods meaning I am doing wrong something. Any ideas/code to share with me to solve this?

EDIT: What's inside the drawingManager

 var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.RECTANGLE, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE ] }, rectangleOptions: { editable:true, draggable:true, geodesic:true } }); 

EDIT 2: In the @MrUpsidown answer I have asked him how to catch events like bounds_changed on rectangle after moving the rectangle on map or resizing.

So, here is the answer if anyone needs to implement that:

 google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(event) { google.maps.event.addListener(event, 'bounds_changed', function(){ if (event.type == google.maps.drawing.OverlayType.RECTANGLE) { var bounds = event.getBounds(); // Here are the new bounds after moving the rectangle around or resizing it. // Rest of the code here. } }); 

Check the edited post of @MrUpsidown for another approach how to solve this.

Regards, Dejan

Answer 1

If you want the bounds of your overlay, then do this:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {

    var bounds = event.overlay.getBounds();
});

Then you can use bounds.getNorthEast(); etc.

Edit: To reply to your second question: an easy way to listen to more events would be to convert your overlay to a google.maps.Rectangle once you have drawn it:

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {

    // Get shape bounds
    var bounds = event.overlay.getBounds();

    // Remove overlay from map
    event.overlay.setMap(null);

    // Create a rectangle here with the overlay bounds
});

JSFiddle demo

Answer 2

var ne = rectangle.getBounds().getNorthEast();
var sw = rectangle.getBounds().getSouthWest();

You can get the lat and long with .lat() and .lng() like the following:

var contentString = '<b>Rectangle moved.</b><br>' +
  'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
  'New south-west corner: ' + sw.lat() + ', ' + sw.lng();