Google Maps with Google MDL Tabs issues

Question

I am trying implement a google maps view in a tab. I am using Google's Material Design Lite framework for the tabs. I had a couple of problems for which I consulted the following SO questions. Neither offered perfect solutions but they did partially fix my issues.

Google Map Infowindow not showing properly

Problems with Google Maps API v3 + jQuery UI Tabs

However, some nagging bugs persist.

The first one regards the rendering of the map itself. I was having the usual map appearing in the top left corner only issue. I rearranged my javascript code like so:

$(function() {
  $('.map-tab').click(function() {
    initialize();
  })
});

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

body {
  font-family: sans-serif;
  background: #eee;
}
a,
h1,
h2 {
  color: #377ba8;
  text-decoration: none;
}
h1,
h2 {
  font-family: 'Georgia', serif;
  margin: 0;
}
h1 {
  border-bottom: 2px solid #eee;
}
h2 {
  font-size: 1.2em;
}
fieldset {
  /*float: left;*/
  clear: both;
  width: 100%;
  margin: 0 0 -1em 0;
  padding: 0 0 1em 0;
  border-style: none;
  border-top: 1px solid #BFBAB0;
  /*background-color: #F2EFE9;*/
}
legend {
  margin-left: 1em;
  color: #000000;
  font-weight: bold;
}
legend span {
  /*position: absolute;*/
  /*margin-top: 0.5em;*/
  /*font-size: 135%;*/
}
fieldset ol {
  padding: 0 0 0 2em;
  list-style: none;
}
ul {
  padding: 0 1em 0 1em;
  list-style: none;
}
fieldset li div {
  float: left;
  clear: left;
  width: 100%;
  padding-bottom: 1em;
}
fieldset.submit {
  float: none;
  width: auto;
  border: 0 none #FFF;
  padding-left: 12em;
}
label {
  float: left;
  width: 10em;
  margin-right: 1em;
  text-align: right;
}
img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto\9;
  /* ie8 */
}
td {
  border: 1px;
}
.page {
  margin: 2em auto;
  width: 65em;
  /*border: 5px solid #ccc;*/
  /*padding: 0.8em;*/
  background: white;
}
.mdl-layout__content {
  background: white;
}
.entries {
  list-style: none;
  margin: 0;
  padding: 0;
}
.entries li {
  margin: 0.8em 1.2em;
}
.entries li h2 {
  margin-left: -1em;
}
.add-entry {
  font-size: 0.9em;
  border-bottom: 1px solid #ccc;
}
.add-entry dl {
  font-weight: bold;
}
.metanav {
  /*text-align: right; font-size: 0.8em;*/
  padding: 0.3em;
  margin-bottom: 1em;
  background: #fafafa;
}
.flash {
  background: #cee5F5;
  padding: 0.5em;
  border: 1px solid #aacbe2;
}
.error {
  background: #f0d6d6;
  padding: 0.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://maps.googleapis.com/maps/api/js?v=3.20"></script>
<style type="text/css">
  #map {
    width: auto;
    /*500px;*/
    height: 400px;
    overflow: hidden;
    max-width: none;
    /*background-color: #CCC;*/
  }
  #map img {
    max-width: none;
  }
</style>

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
    <a href="#listings-panel" class="mdl-tabs__tab is-active">Listings</a>
    <a href="#map-panel" class="mdl-tabs__tab map-tab">Map View</a>
    <a href="#compare-panel" class="mdl-tabs__tab">Compare Selections</a>
  </div>

  <div class="mdl-tabs__panel is-active" id="listings-panel">
  </div>
  <div class="mdl-tabs__panel" id="map-panel">
    <div id="map"></div>
  </div>
  <div class="mdl-tabs__panel" id="compare-panel">
  </div>
</div>

This renders the map part nicely on initial viewing. But once you start switching around the tabs, it returns to only rendering on the top corner of the canvas. (However if you click on the map's tab a second time in succession, it renders perfectly again.)

The second issue is that the map controls appear squished vertically. The only fix I could find was to set the max-width of the img to none. I have tried that but to no avail.

The code snippet above illustrates the issue I am having pretty well. Any ideas on how to fix this would be greatly appreciated!

score 1 · Accepted Answer · answered Oct 12 '15 at 23:49

Your problems are

You have this css applying to img which is corrupting the controls:

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto\9;
    /* ie8 */
}

You need to override both max-width and max-height

#map img {
    max-width: none !important;
    max-height: none !important;
}

You need to trigger the map resize event once your tab is displayed

proof of concept fiddle

Google Maps with Google MDL Tabs issues

1 Answers1