How do you find the 4 corners of a Google Map V3 when the map is rotated?

Question

Google maps V3 API has a getBounds method on the map that returns you the Northeast and Southwest corners of the viewport. In theory, I could calculate the Northwest and Southeast corners by using the latitude and longitude of the opposite points, i.e.

NE = (lat= 37.5, lng= -97.5)
SW = (lat= 37.0, lng= -96)
... therefore ...
NW = (lat= 37.5, lng= -96)
SE = (lat= 37.0, lng= -97.5)

(there was even a post about this 5 years ago.)

But all of the answers I've found anywhere online assume the map is pointing due North, meaning "Northeast" really means "top right".

But what happens if the map is rotated? Do I have to use trig based on the orientation of the map to figure out the other two corners? Or does Google give me actual Northeast and Southwest coordinates of an area that encompasses what's in my viewport, even if that means the resulting rectangle has parts that fall outside of the bounds of a rotated map?

Vadim Gremyachev Vadim Gremyachev · Accepted Answer · 2015-11-13T16:16:43

Or does Google give me actual Northeast and Southwest coordinates of an area that encompasses what's in my viewport

That's right, getBounds function returns north-east and south-west corners based on current viewport. The below example illustrates it, in particular it draws the rectangle with the size that encompasses current viewport:

var map;
var area;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 45.518, lng: -122.672},
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    //heading: 0,
    //tilt: 45
  });

  google.maps.event.addListenerOnce(map, 'idle', function(){
       drawBounds(map);  
  });
  
}



function drawBounds(map)
{
    var bounds = map.getBounds();
    var areaBounds = {
         north: bounds.getNorthEast().lat(),
         south: bounds.getSouthWest().lat(),
         east: bounds.getNorthEast().lng(),
         west: bounds.getSouthWest().lng()
    };
    
    area = new google.maps.Rectangle({
       strokeColor: '#FF0000',
       strokeOpacity: 0.8,
       strokeWeight: 2,
       fillColor: '#FF0000',
       fillOpacity: 0.35,
       map: map,
       bounds:areaBounds
  });
  console.log(areaBounds);
}


function rotate() {
   var heading = map.getHeading() || 0;
   map.setHeading(heading + 90);
   area.setMap(null);
   drawBounds(map);
}

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}

#map {
   height: 100%;
}

#floating-panel {
   position: absolute;
   top: 10px;
   left: 25%;
   z-index: 5;
   background-color: #fff;
   padding: 5px;
   border: 1px solid #999;
   text-align: center;
   font-family: 'Roboto','sans-serif';
   line-height: 30px;
   padding-left: 10px;
}

<div id="floating-panel"><input type="button" value="Rotate" onclick="rotate();"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

How do you find the 4 corners of a Google Map V3 when the map is rotated?

1 Answers