I have a bound value returned by getBounds() google map API as under -

**_.pe {pa: oe, ka: ke}       
ka: ke {g: -180, h: 180}          
pa: oe {g: -26.222936261748305, h: 72.98776122961861}       
__proto__: Object**             

On googling I found out that we can get use getSouthWest() and getNorthEast() apis to decode the
above information to get desired co-ordinates, but unfortunately its not working for me.
I get the following output -

**console.log(vr.getNorthEast())      
VM312861:1          
_.L {lat: ƒ, lng: ƒ}     
lat: ƒ ()        
lng: ƒ ()         
__proto__: Object**  

Any ideas how to fix this or any other method that I can use to get co-ordinates from bounds.

Thanks

I have a bound value returned by getBounds() google map API as under -

**_.pe {pa: oe, ka: ke}       
ka: ke {g: -180, h: 180}          
pa: oe {g: -26.222936261748305, h: 72.98776122961861}       
__proto__: Object**             

On googling I found out that we can get use getSouthWest() and getNorthEast() apis to decode the
above information to get desired co-ordinates, but unfortunately its not working for me.
I get the following output -

**console.log(vr.getNorthEast())      
VM312861:1          
_.L {lat: ƒ, lng: ƒ}     
lat: ƒ ()        
lng: ƒ ()         
__proto__: Object**  

Any ideas how to fix this or any other method that I can use to get co-ordinates from bounds.

Thanks

• javascript
• google-maps

Share Improve this question Follow asked Dec 9, 2019 at 11:22 golimoligolimoli 14311 silver badge99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

getNorthEast and getSouthWest return LatLng objects. To get the raw values from these objects, you could use the following functions on a LatLng object to get the coordinates: .lat() for latitude, .lng() for longitude, or .toString() for a string representation of the coordinates.

Also, note that the map must be initialized or the bounds will be undefined.

Here's a working example. You can ignore the initial script error, which is due to not using an API key. Just drag the map to see the coordinates appear in the console for all four corners:

let map;

function initialize() {
  let mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  map.addListener("dragend", function() {
    let bounds = map.getBounds();
    let ne = bounds.getNorthEast(); // Coords of the northeast corner
    let sw = bounds.getSouthWest(); // Coords of the southwest corner
    let nw = new google.maps.LatLng(ne.lat(), sw.lng()); // Coords of the NW corner
    let se = new google.maps.LatLng(sw.lat(), ne.lng()); // Coords of the SE corner
    console.log(ne.toString(), sw.toString(), nw.toString(), se.toString());
  })
}

google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
  height: 500px;
  margin: 0px;
  padding: 0px;
  width: 500px;
}

<script src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false"></script>
<div id="map-canvas"></div>