FitBounds on fullscreen zooms out to 0

Question

FitBounds on fullscreen zooms out to 0

437 views Asked by Meehanick At 19 October 2024 at 22:23

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);
    });
}

Original Q&A

There are 1 answers

**geocodezip** · Answer 1 · 2017-09-08 13:37:34

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>

TechQA.

FitBounds on fullscreen zooms out to 0

There are 1 answers

Related Questions in GOOGLE-MAPS-API-3

Related Questions in FITBOUNDS

Popular Questions

Popular Tags

Trending Questions