CODEWITHSUNDEEP
javascriptgoogle-mapslatitude-longitude
Chris Schmitz
Chris Schmitz

Reputation: 20950

Error when trying to create a LatLngBounds object from valid LatLng objects

I'm working with the google maps javascript API and currently I'm trying to create a LatLngBounds object so that I can apply it to my google map based on the locations within an array.

I'm finding the southwestern and northeastern most points, creating LatLng objects from them and then trying to use those to create the LatLangBounds object:

centerMap: function (){
    var lowestLatitude = this.locations.reduce(function (carry, nextLocation, index){
            return carry < nextLocation.position.lat && carry !== null ? carry : nextLocation.position.lat;
    }, null);

    var lowestLongitude = this.locations.reduce(function (carry, nextLocation, index){
            return carry < nextLocation.position.lng && carry !== null ? carry : nextLocation.position.lng;
    }, null);

    var highestLatitude = this.locations.reduce(function (carry, nextLocation, index){
            return carry > nextLocation.position.lng && carry !== null ? carry : nextLocation.position.lat;
    }, null);

    var highestLongitude = this.locations.reduce(function (carry, nextLocation, index){
            return carry > nextLocation.position.lng && carry !== null ? carry : nextLocation.position.lng;
    }, null);

    debugger;
    var southWest = new google.maps.LatLng({ lat: lowestLatitude, lng: lowestLongitude});
    var northEast = new google.maps.LatLng({ lat: highestLatitude, lng: highestLongitude});
    var bounds = new google.maps.LatLngBounds({sw: southWest, ne: northEast});
    this.map.fitBounds(bounds);
}

The error I'm running into is when I create the LatLngBounds instance. I get the error:

Uncaught InvalidValueError: not a LatLng or LatLngLiteral: in property lat: not a number

The thing is, the LatLng instances for southWest and northEast are created without an error, so it seems odd that trying to create a bounds from two valid LatLng objects would throw an error.

gif of the error happening

What am I missing that is causing this error?

Upvotes: 1

Views: 5300

Answers (3)

geocodezip
geocodezip

Reputation: 161334

The google.maps.LatLng constructor doesn't (currently) take a google.maps.LatLngLiteral as an argument. It requires two Numbers representing the latitude and longitude of the geographic coordinates (in that order). This:

var southWest = new google.maps.LatLng({ lat: lowestLatitude, lng: lowestLongitude});
var northEast = new google.maps.LatLng({ lat: highestLatitude, lng: highestLongitude});
var bounds = new google.maps.LatLngBounds({sw: southWest, ne: northEast});

Should be:

var southWest = new google.maps.LatLng(lowestLatitude, lowestLongitude);
var northEast = new google.maps.LatLng(highestLatitude, highestLongitude);
var bounds = new google.maps.LatLngBounds(southWest, northEast);

proof of concept 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
    });
  var lowestLatitude = bndsObj.bounds.south;
  var lowestLongitude = bndsObj.bounds.west;
  var highestLatitude = bndsObj.bounds.north;
  var highestLongitude = bndsObj.bounds.east;
  var southWest = new google.maps.LatLng(lowestLatitude, lowestLongitude);
  var northEast = new google.maps.LatLng(highestLatitude, highestLongitude);
  var bounds = new google.maps.LatLngBounds(southWest, northEast);
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, "load", initialize);
// New York City bounds
var bndsObj = {
  "bounds": {
    "south": 40.4960439,
    "west": -74.2557349,
    "north": 40.91525559999999,
    "east": -73.7002721
  }
};
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Upvotes: 1

Oliver
Oliver

Reputation: 9002

Looking at the documentation the constructor takes two parameters, not an object with two properties. You'll therefore need something like the following:

var bounds = new google.maps.LatLngBounds(southWest,  northEast);

Upvotes: 1

2519211
2519211

Reputation: 309

Looks like you're passing an object to the constructor instead of 2 parameters - have you tried this:

var bounds = new google.maps.LatLngBounds(southWest, northEast);

Upvotes: 2

Related Questions