Google Maps API fitBounds() behaves differently if called after resize event

Question

I'm using google maps api to show a flight path on a web site with a mobile and desktop view. The mobile view hides the containing div (display: none) if the display width is below 320px. If the user turns the phone to landscape mode, the div and thus the map becomes visible. However, if I load the page in landscape mode, the map shows another zoom level, than if the page is loaded in portrait mode (with the map not shown) and then rotated to landscape. The resize event is fired and within it I call fitBounds(). Any idea??

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://www.foo.bar/label.js"></script>
<script>
var bounds = new google.maps.LatLngBounds(null);
var map = null;
var myLatLng = null;

function initialize() {

  var mapOptions = {
    panControl: true,
    scaleControl: false,
    overviewMapControl: false,
    zoomControl: true,
    mapTypeControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    center: { lat: 0.0, lng: 0.0},
    zoom: 2
  };

  var destinations = [
    {lat:25.073858, lng:55.2298444, myTitle:'Dubai'},
    {lat:13.7246005, lng:100.6331108, myTitle:'Bangkok'},
    {lat:8.722049, lng:98.23421, myTitle:'Khao Lak'},
    {lat:1.3146631, lng:103.8454093, myTitle:'Singapore'}
  ];

  var image = {
     url: 'plane-icon-medium.png',
     // This marker is 24 pixels wide by 24 pixels tall.
     size: new google.maps.Size(48, 48),
     // The origin for this image is 0,0.
     origin: new google.maps.Point(0,0),
     // The anchor for this image is the middle at 12,12.
     anchor: new google.maps.Point(12, 12)
   };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var flightPath = new google.maps.Polyline({
    path: destinations,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);

  for (var i = 0; i < destinations.length; i++) {
    var myTitle = destinations[i].myTitle;
    myLatLng = new google.maps.LatLng(destinations[i].lat, destinations[i].lng);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: 'test',
        text: myTitle,
    });
    var label = new Label({
       map: map
    });
    label.bindTo('position', marker, 'position');
    label.bindTo('text', marker, 'text');
    bounds.extend(marker.position);
  }
  map.fitBounds(bounds);
  if(map.getZoom() == 0) map.setZoom(1);
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
     google.maps.event.trigger(map, "resize");
     map.fitBounds(bounds);
     //alert("Resize Event fired");
     //if(map.getZoom() == 0) map.setZoom(1);
    });

</script>
<div id="map_canvas"></div>

Thanks, Klayman

Answer 1

Try disabling the default UI of Google API. I think your map is not panning on portrait. The snippet shows the template for disabling it. Hope it helps.

 function initialize() { var mapOptions = { zoom: 4, center: new google.maps.LatLng(-33, 151), disableDefaultUI: true } var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); }