How to get 4 vertex coordinates from gmaps RECTANGLE ( Overlay)?

Question

How do you get 4 vertex coordinates from gmaps RECTANGLE (Overlay)?

I can get only NE and SW lat long from selectedShape.getBounds()

I need a 4 vertex rectangle to post-process check in MySQL php functions.

Answer 1

NorthWest = NorthEast Lat , SouthWest Lng

SouthEast = SouthWest Lat , NorthEast Lng

var bounds = rectangle.getBounds(); var NE = bounds.getNorthEast(); var SW = bounds.getSouthWest(); // North West var NW = new google.maps.LatLng(NE.lat(),SW.lng()); // South East var SE = new google.maps.LatLng(SW.lat(),NE.lng()); 

example fiddle

code snippet:

var geocoder;  var map;    function initialize() {    var map = new google.maps.Map(      document.getElementById("map_canvas"), {        center: new google.maps.LatLng(37.4419, -122.1419),        zoom: 13,        mapTypeId: google.maps.MapTypeId.ROADMAP      });    google.maps.event.addListenerOnce(map, 'bounds_changed', function() {      var rectangle = new google.maps.Rectangle({        bounds: map.getBounds()      })      var bounds = rectangle.getBounds();      var NE = bounds.getNorthEast();      var NEmark = new google.maps.Marker({        map: map,        position: NE,        title: "NE"      });      var SW = bounds.getSouthWest();      var SWmark = new google.maps.Marker({        map: map,        position: SW,        title: "SW"      });      // North West      var NW = new google.maps.LatLng(NE.lat(), SW.lng());      var NWmark = new google.maps.Marker({        map: map,        position: NW,        title: "NW"      });      // South East      var SE = new google.maps.LatLng(SW.lat(), NE.lng());      var SEmark = new google.maps.Marker({        map: map,        position: SE,        title: "SE"      });        var polygon = new google.maps.Polygon({        map: map,        paths: [          [NE, NW, SW, SE]        ]      });      map.setZoom(map.getZoom() - 1);    });  }  google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>  <div id="map_canvas"></div>