Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google maps API V3 fitBounds() not working

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 hereenter 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.

like image 446
emersonthis Avatar asked Oct 19 '14 16:10

emersonthis


1 Answers

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.

like image 179
Jimmy Avatar answered Oct 11 '22 05:10

Jimmy