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 enpasses what's in my viewport, even if that means the resulting rectangle has parts that fall outside of the bounds of a rotated map?

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 enpasses what's in my viewport, even if that means the resulting rectangle has parts that fall outside of the bounds of a rotated map?

• javascript
• google-maps
• google-maps-api-3

1 Answer 1

Or does Google give me actual Northeast and Southwest coordinates of an area that enpasses 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 enpasses 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./maps/api/js?callback=initMap"></script>