I want to call fitBounds() on a Google map so that the user can see their location relative to the selected marker / location.
Here is my function that 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 great in about 80% of cases. But about 1 time by 5 times, the marker is not completely taken into account, and the scale is too high for two points to be visible at the same time. What am I doing wrong?
It may be that my map uses custom markers.
To help with debugging, I added this code to draw borders on the map ...
rect = new google.maps.Rectangle( {bounds: latlngbounds, map: $scope.map} );
It always looks perfect for the first results of a pair: 
But often this is not true: 
Please note that in each case when it is incorrect, it seems that one of the dimensions of the rectangle (height / width) is correct, and the other is not. My gut tells me this is relevant.
Overview of related issues
I know this is a popular question, but I looked through the rest and my question does not seem to duplicate any of them. We hope that this stock will be useful to future troubleshooting specialists, but none of them solved my problem.
Google maps V3 fitBounds inaccurate Useless question without code and no answers
Google Maps API v3 - fitBounds for only one marker. The user redefined within the loop without realizing it.
Using setZoom () after using fitBounds () with the Google V3 Maps API and the Google Maps API V3 fitbounds () is scaled, but never fit Google Maps using fitBounds fitBounds () happens asynchronously, so the next steps should be wrapped in an eventListener.
google maps → fitBounds manually The user passed incorrect parameters of the LatLngBounds type (there must be two google.maps.LatLng s)
google maps fitBounds () broken or ..? and Google maps API V3 method fitBounds () Created google.maps.LatLngBounds with coordinate errors (instead of leaving it empty and using .extend() )
Trying to find suitable for Google Maps Super noob did not understand that javascript methods are case sensitive
Google displays custom V3 marker images and fitBounds () fitBounds() works as expected, but the user needs more space for custom error markers.
Google Maps V3 fitBounds for visible markers A simple question on how to use fitBounds() ... rtfm
Google Maps API V3 - fitBounds randomly works, but sometimes ignores borders and loads in the middle of the ocean There are no answers at the time of writing. Sounds like invalid lat / lng pairs.