Search code examples
google-maps-api-3markerclustererfitbounds

Google Maps: full screen + fitBounds does not fit bounds


I have a map displaying the markers with markerClusterer.

Everything works fine in the normal view, but in full screen mode the click on the cluster runs the "fitBounds" and the zoom is not changed correctly (Zoom out happens instead of zoom in).

The code:

var mapOptions = {
    zoom: 17,
    minZoom: 4,
    maxZoom: 20,
    center: {lat: 0, lng: 0},
    fullscreenControl: true
}

var mcOptions = {
    gridSize: 20,
    styles: clusterStyles,
    maxZoom: 20
};

var bounds = new google.maps.LatLngBounds();

function initialize(itensJSON){

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

    $.each(itensJSON, function (i, item) {
        var marker = new google.maps.Marker({
            position: item.location,
            id: item.id
        });
        markers.push(marker);
        bounds.extend(marker.getPosition());
    });

    map.fitBounds(bounds);
    markerClusterer = new MarkerClusterer(map, markers, mcOptions);
}

html:

<div id="map_container" style="position: absolute; width: 100%; height: 80%;">
      <div id="map" style="width: 100%; height: 100%">
      </div>
  </div>

Zoom out happens instead of zoom in, when runs the fitbounds in 'triggerClusterClick' of markerclusterer.js:

ClusterIcon.prototype.triggerClusterClick = function(event) {
  var markerClusterer = this.cluster_.getMarkerClusterer();

  // Trigger the clusterclick event.
  google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_, event);

  if (markerClusterer.isZoomOnClick()) {
    // Zoom into the cluster.
    this.map_.fitBounds(this.cluster_.getBounds());
  }
};

Does anyone know what's happening?

PS: the change to full screen is made with the "fullscreenControl" (enabled in options map)

sample with the problem: fiddle


Solution

  • The problem happens when use a '% measure' in the height of the div map

    I solve the problem like this:

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

    solution sample: fiddle