getBounds().contains returning false

Question

I want the marker to be detected and display a value that is assigned to a rectangle. Through research, I found this , but it is not applicable in my case as I only need a latlong point. I have found something similar to what I want and tried it out, which is here

But it does not seem to work in my case. I have a rectangle below:

var rectangle1 = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: {
  north: -37.822802,
  south: -37.822260,
  east: 145.036010,
  west: 145.035324
}
});

And I tried to insert a point, which is -37.822545, 145.035526, and this point is within the rectangle, and it is supposed to return true but it wasn't. Here is my JSfiddle

Answer 1

Looks like the LatLngLiteralBounds input for google.maps.Rectangle is broken. It creates a rectangle with north and south reversed. With your original rectangle ( north: -37.822802, south: -37.822260 ), I get:

NE1:-37.822802,145.03601  (north=-37.822802, incorrect)
SW1:-37.82226,145.035324  (south=-37.82226, incorrect) 

Whereas if I create the rectangle with a google.maps.LatLngBounds object, I get:

NE2:-37.82226,145.03601   (north=-37.82226, correct)
SW2:-37.822802,145.035324 (south=-37.822802, correct)

proof of concept fiddle

(blue markers are NE/SW of rectangle2 , red markers are NE/SW of rectangle1 .)

someone should create an issue in the issue tracker

code snippet:

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 19, center: { lat: -37.82280243352756, lng: 145.0353240966797 }, mapTypeId: 'terrain' }); var rectangle1 = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, bounds: { north: -37.822802, south: -37.822260, east: 145.036010, west: 145.035324 } }); var rectangle2 = new google.maps.Rectangle({ strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35, map: map, bounds: new google.maps.LatLngBounds( new google.maps.LatLng(-37.822802, 145.035324), // SW new google.maps.LatLng(-37.822260, 145.036010)) // NE }); var marker = new google.maps.Marker({ map: map, position: { lat: -37.822545, lng: 145.035526 }, title: "-37.822545, 145.035526" }); var NEmark1 = new google.maps.Marker({ map: map, position: rectangle1.getBounds().getNorthEast(), title: "NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue() }); var SWmark1 = new google.maps.Marker({ map: map, position: rectangle1.getBounds().getSouthWest(), title: "SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue() }); var NEmark2 = new google.maps.Marker({ map: map, position: rectangle2.getBounds().getNorthEast(), title: "NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue(), icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" }); var SWmark2 = new google.maps.Marker({ map: map, position: rectangle2.getBounds().getSouthWest(), title: "SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue(), icon: "http://maps.google.com/mapfiles/ms/micons/blue.png" }); map.fitBounds(rectangle1.getBounds()); console.log(rectangle1.getBounds().toUrlValue()); console.log("NE1:" + rectangle1.getBounds().getNorthEast().toUrlValue()); console.log("SW1:" + rectangle1.getBounds().getSouthWest().toUrlValue()); document.getElementById('contains').innerHTML = "rectangle1 bounds.contains=" + rectangle1.getBounds().contains({ lat: -37.822545, lng: 145.035526 }); console.log(marker.getPosition().toUrlValue()); console.log(rectangle2.getBounds().toUrlValue()); console.log("NE2:" + rectangle2.getBounds().getNorthEast().toUrlValue()); console.log("SW2:" + rectangle2.getBounds().getSouthWest().toUrlValue()); console.log(rectangle2.getBounds().contains({ lat: -37.822545, lng: 145.035526 })); document.getElementById('contains').innerHTML += " rectangle2 bounds.contains=" + rectangle2.getBounds().contains({ lat: -37.822545, lng: 145.035526 }); console.log(rectangle2.getBounds().contains(marker.getPosition())); } 

 html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map { height: 95%; width: 100%; } 

 <div id="contains"></div> <div id="map"></div> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 

Answer 2

I think you just mixed up your north and south parameters. (A larger negative latitude number is further south than a smaller one)

function initMap() {


var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 19,
    center: {
      lat: -37.82280243352756,
      lng: 145.0353240966797
    },
    mapTypeId: 'terrain'
  });

  var rectangle1 = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      south: -37.822802,  // This is further south ...
      north: -37.822260,  // than this
      east: 145.036010,
      west: 145.035324
    }
  });
  alert(rectangle1.getBounds());
  alert(rectangle1.getBounds().contains({lat:-37.822545, lng:145.035526}));
}

With north and south switched like this, the js-fiddle returns true.