JavaScript code for Google Maps API: Need the bounds to stay the same in fullscreen mode-CodePudding

I want to use Google Maps API to pull up a map on the screen. My only requirement is that I want the bounds of the map to stay the same even when someone switches between regular window and fullscreen mode. Here's the script I have put together. It does pull up the map, but when I switch to fullscreen, the view changes:

function initMap() {
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(39.051937, -84.721402),
new google.maps.LatLng(39.219590,-84.366564));

var center = bounds.getCenter();

const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: bounds.getCenter(),    
zoomControl: true,
zoomControlOptions: {
  position: google.maps.ControlPosition.LEFT_CENTER,
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,

fullscreenControl: true,

}});

map.fitBounds(bounds)

}

window.initMap = initMap;

How can I fix the code so that the view (i.e. the bounds) stays the same? I'd really appreciate any help.

CodePudding user response：

The best you can do is to detect when the map changes to fullscreen, and reset the bounds of the map. If the shape of the div changes when it goes to fullscreen, the resulting bounds might be different.

proof of concept fiddle

code snippet:

function initMap() {
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(39.051937, -84.721402),
new google.maps.LatLng(39.219590,-84.366564));

var center = bounds.getCenter();

const map = new google.maps.Map(document.getElementById("map"), {
zoom: 13,
center: bounds.getCenter(),    
zoomControl: true,
zoomControlOptions: {
  position: google.maps.ControlPosition.LEFT_CENTER,
},
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP,

fullscreenControl: true,

}});

map.fitBounds(bounds)
google.maps.event.addListenerOnce(map, "bounds_changed", function() {
  rectangle = new google.maps.Rectangle({
    map: map,
    bounds: map.getBounds()
  });
});
function setMapBounds() {
  map.fitBounds(bounds);
}
new ResizeObserver(setMapBounds).observe(document.getElementById("map"))
}

window.initMap = initMap;

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- 
     The `defer` attribute causes the callback to execute after the full HTML
     document has been parsed. For non-blocking uses, avoiding race conditions,
     and consistent behavior across browsers, consider loading using Promises
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>