FitBounds on fullscreen zooms out to 0

Question

I have a map in div with absolute position inside of a container that is absolute too. Also map's size is calculated from top, bottom, left and right css properties. Clicking on polyline calls fitBounds on map, and instead of fitting it zooms out to 0.

Example is here: fiddle (to reproduse this situation enter the fullscreen mode, click on first polyline, outzoom and click on second)

Any suggestions why it's happening?

<body onload="initialize()">
  <div id="map_container" style="position: absolute; width: 100%; height: 100%;">
      <div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
      </div>
  </div>
</body>

and js code

var mapOptions = {
    zoom: 7,
    center: {lat: 52, lng: 12.5}
}

var firstPolylineCoordinates = [
    {lat: 52, lng: 12},
    {lat: 52, lng: 13}
];

var secondPolylineCoordinates = [
    {lat: 51, lng: 12},
    {lat: 51, lng: 13}
];

function initialize(){

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var bounds = new google.maps.LatLngBounds();

    var firstPolyline = new google.maps.Polyline({
      path: firstPolylineCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 5
    });
    firstPolyline.setMap(map);
    firstPolyline.addListener("click", function(polyMouseEvent){
      bounds.extend(firstPolylineCoordinates[0]);
      bounds.extend(firstPolylineCoordinates[1]);
        map.fitBounds(bounds);
    });

    var secondPolyline = new google.maps.Polyline({
      path: secondPolylineCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 5
    });
    secondPolyline.setMap(map);
    secondPolyline.addListener("click", function(polyMouseEvent){
      bounds.extend(secondPolylineCoordinates[0]);
      bounds.extend(secondPolylineCoordinates[1]);
        map.fitBounds(bounds);
    });
}

I get javascript error with your fiddle: `Uncaught ReferenceError: google is not defined`. Please provide a [mcve] that demonstrates your issue **in the question itself**. — geocodezip, Sep 06 '17 at 15:35
Why it works for me then? Seems like no google maps lib included, but i have it in "external resources"... — Meehanick, Sep 06 '17 at 15:49
You have to declare your bounds' variable inside the function initialize. — SphynxTech, Sep 07 '17 at 07:02
Ok, it probably happens cuz i've put same coords to bounds. But i don't have this problem in my project, so i have no idea why it doesn't work there but works here... — Meehanick, Sep 07 '17 at 10:10

score 0 · Answer 1 · answered Sep 08 '17 at 13:37

You are using the same bounds for the two polyline "zoom" operations. When you click on the second polyline, you end up zooming to the bounds for both polylines (which is not what you want).

Declare the bounds variable inside the polyline click listener functions:

firstPolyline.addListener("click", function(polyMouseEvent){
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(firstPolylineCoordinates[0]);
  bounds.extend(firstPolylineCoordinates[1]);
    map.fitBounds(bounds);
});

proof of concept fiddle

code snippet:

var mapOptions = {
    zoom: 7,
    center: {lat: 52, lng: 12.5}
}

var firstPolylineCoordinates = [
    {lat: 52, lng: 12},
    {lat: 52, lng: 13}
];

var secondPolylineCoordinates = [
    {lat: 51, lng: 12},
    {lat: 51, lng: 13}
];

function initialize() {

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var firstPolyline = new google.maps.Polyline({
    path: firstPolylineCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 5
  });
  firstPolyline.setMap(map);
  firstPolyline.addListener("click", function(polyMouseEvent) {
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(firstPolylineCoordinates[0]);
    bounds.extend(firstPolylineCoordinates[1]);
    map.fitBounds(bounds);
  });

  var secondPolyline = new google.maps.Polyline({
    path: secondPolylineCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 5
  });
  secondPolyline.setMap(map);
  secondPolyline.addListener("click", function(polyMouseEvent) {
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(secondPolylineCoordinates[0]);
    bounds.extend(secondPolylineCoordinates[1]);
    map.fitBounds(bounds);
  });
}

<script src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="initialize()">
  <div id="map_container" style="position: absolute; width: 100%; height: 100%;">
    <div id="map" style="position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px">
    </div>
  </div>
</body>

Thank you for your help. I've already found that problem with _bounds_ variable (read my last comment under main post). But, as i said there, i don't have such a problem in my project, all bounds to fit are in new declared var just right before fitting. Unfortunately i cant reproduse my bug in fiddle... Anyway, even with _bounds_ var used with both polylines, it should zoom to the bounds for both polylines, but not zoom out to max like it does, shouldn't it? — Meehanick, Sep 08 '17 at 14:13
Depends on the resulting bounds. Please provide a [mcve] that demonstrates your issue **in the question itself**. I reproduced the described issue in your fiddle and the code above fixed it. — geocodezip, Sep 08 '17 at 14:22

FitBounds on fullscreen zooms out to 0

1 Answers1