Realign Google Maps To Fit All Markers Into To The Right 70% Of The Map

I would like to provide a client with a solution for displaying all of the branches in one city on a map (Google Maps JavaScript API). The map behaves more like an in-website app t

Solution 1:

I can think of two solutions to this problem:

1. shrink the map div to the size you actually want. Why do you even display a div over map? Why don't you just shrink the map div when the info-window is present? And then resize it back when info-window is not present (care: trigger resize event on map after you do any of those operations) If you have no actual reason to do this I suggest you to go with this solution.

2. If 1. is not viable for you can create a fake bounds element, which would be in the appropriate distance ti the left from the calculated bounds. E.g. your original bounding box lng starts at 50 and ends in 70. That means it's width is 20, 20*0.3=6 so you would create a fake element at lng 50-6=44 and fit map into those new bounds. So your code would look something like this (untested):

functionrealignMap() {
  resizeFinished(function(){
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
      bounds.extend(markers[i].getPosition());
    }
    var width = bounds.getSouthWest().lng() > bounds.getNorthEast().lng() ? (180 - bounds.getSouthWest().lng()) + (bounds.getNorthEast().lng() - (-180)) : bounds.getSouthWest().lng() - bounds.getNorthEast().lng();
    if(width > 180);
    var new_lng = bounds.getSouthWest().lng() - (width * 0.3);
    if(new_lng < -180) new_lng = 180 - (-180 - new_lng);
    bounds.extend(new google.maps.LatLng(bounds.getCenter().lat(), new_lng);
    map.fitBounds(bounds);
  }, 300, 'mapresizeuniqueid');
}

Of course this wouldn't work if your markers are covering bigger lng span than 70% of whole earth.

EDIT Edited the code to work when bounds.getSouthWest().lng() > bounds.getNorthEast().lng()