6

I'm want to call fitBounds() on a google map so that a user can see their own location relative to a selected marker/location.

Here is my function which handles this:

var fitMapToShowResult = function(index){
    var hereLatLng = new google.maps.LatLng (lat,lng); //location of the user defined outside this func
    var firstResultLatLng = new google.maps.LatLng(
                                $scope.searchResults[index].geometry.location.k,
                                $scope.searchResults[0].geometry.location.B
    );
    var latlngList = new Array( hereLatLng, firstResultLatLng ); // latlng: an array of instances of GLatLng
    var latlngbounds = new google.maps.LatLngBounds();
    for (var i=0;i<latlngList.length;i++){
       latlngbounds.extend(latlngList[i]);
       console.log('latlngbounds',latlngbounds);
    }
    //$scope.map.setCenter(latlngbounds.getCenter());
    $scope.map.fitBounds(latlngbounds); 

};

It works perfectly about 80% of the time. But roughly 1 in 5 times the marker is completely out of view and the zoom is way too high for the two points to ever be visible at the same time. What am I doing wrong?

It may be relevant that my map uses custom markers.

To assist with debugging, I added this code to draw the bounds on the map...

    rect = new google.maps.Rectangle( {bounds: latlngbounds, map: $scope.map} );

It always looks perfect for the first couple results: enter image description here

But often it's incorrect: enter image description here enter image description here Notice that in each of the cases where it's incorrect, it appears that one of the dimensions of the rectangle (height/width) is correct, but the other is not. My gut tells me this is relevant.

Roundup of similar questions

I know this is a popular question, but I've reviewed all of the others and my issue does not seem to be a duplicate of any of them. Hopefully this stockpile will be useful to future troubleshooters, but none of these solved my issue.

google maps V3 fitBounds not accurate Useless question with no code and no answers

Google Maps API v3 - fitBounds centers only one marker User was re-defining the inside a loop without realizing it.

Using setZoom() after using fitBounds() with Google Maps API V3 & Google Maps API V3 fitbounds() zooms out but never in & Google Maps with fitBounds don't zoom fitBounds() happens asyncronously so downstream actions need to be wrapped in eventListener.

google maps → fitBounds manually User was passing incorrect type parameters to LatLngBounds (should be two google.maps.LatLngs)

google maps fitBounds() is broken or..? & Google maps API V3 method fitBounds() Was constructing the google.maps.LatLngBounds with buggy coordinates (instead of leaving it empty and using .extend())

Trying to get Google Maps fitbounds to work Super noob did not realize javascript methods were case sensitive

Google maps V3 custom marker images and fitBounds() fitBounds() works as expected but user needed to allow more space for bug custom markers

Google Maps V3 fitBounds on visible markers Simple question about how to use fitBounds()... rtfm

Google Maps API V3 - fitBounds randomly works but occasionally ignores bounds and loads in the middle of the ocean No answers at time of writing. Sounds like invalid lat/lng pairs.

Community
  • 1
  • 1
emersonthis
  • 32,822
  • 59
  • 210
  • 375
  • Why are you calling both `$scope.map.setCenter(latlngbounds.getCenter());` and `$scope.map.fitBounds(latlngbounds);`? They may be interfering with each other. – geocodezip Oct 19 '14 at 19:19
  • @geocodezip Sorry that was a mistake. I experimented with both. It doesn't seem to matter if the setCenter() is included or not, so I've removed it. – emersonthis Oct 19 '14 at 19:54
  • 1
    Can you provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that exhibits the issue? – geocodezip Oct 20 '14 at 02:10
  • You should avoid `geometry.location.k`. As stated above, please provide a MCVE so that we know what is `$scope.searchResults` and other variables as well. – MrUpsidown Oct 20 '14 at 14:38
  • @MrUpsidown Where is the remark about `geometry.location.k` that you are referencing? I'd like to understand that better. I'm working on a MCVE but it's taking some time because I have to carve this bug out of a large javascript app for it to be "M" – emersonthis Oct 20 '14 at 15:14
  • Where you are using `$scope.searchResults[index].geometry.location.k` and `$scope.searchResults[0].geometry.location.B`. `geometry.location` is not a plain object. It is a `LatLng` object. Therefore you should use the `lat()` and `lng()` methods because properties `k` and `B` are subject to change. – MrUpsidown Oct 20 '14 at 15:39
  • nice roundup of the similar questions! Great place to look for common mistakes – ProblemsOfSumit Apr 30 '15 at 13:46

2 Answers2

1

Don't use the values as geometry.location.**k**, it depends on minimized file (with some tool like MinifyJS) then it'll changes when google release a new versión.

Jimmy
  • 111
  • 4
0

MrUpsidown was right. My bounding box was wrong because I was referencing ....geometry.location.k directly instead of the LatLng object. Refactoring the code accordingly corrected the problem.

emersonthis
  • 32,822
  • 59
  • 210
  • 375