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