CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
Achiel Volckaert
Achiel Volckaert

Reputation: 1014

google maps map under materialize tab

I tried to create a site that looks fast by changing the content dynamically, so I use the tab system form materialize, everything works great, except that my google maps map that is generate via the api shows as a blank window: map

it shows the map when I resize my window or if the page is active, active isn't a solution!

Thanks in advance for possible solutions/fixes

I created this JSFiddle to showcase it: https://jsfiddle.net/8ajob4ja/

html:

<div class="row">
     <div class="col s12">
       <ul class="tabs">
         <li class="tab col s6"><a href="#test1">Test 1</a></li>
         <li class="tab col s6"><a href="#test2" class="active">Test 2</a></li>
</ul>
      </div>
      <div id="test1" class="col s12">           
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
    </script>
      </div>
      <div id="test2" class="col s12">
        2
      </div>
    </div>

js:

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

css:

#map {
  height: 400px;
  width: 100%;
 }

Upvotes: 2

Views: 1448

Answers (2)

Emipro Technologies Pvt. Ltd.
Emipro Technologies Pvt. Ltd.

Reputation: 14746

Please try this code. Because google is directly calling initMap() when script is execute so at that time due to some reason map object is not initialised So for that reason we need to call initMap() like this way.

Remove &callback=initMap from js link so it will look like as below.

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>

Add class in tab.

<li class="tab col s6 test"><a href="#test1">Test 1</a></li>

Replace your jquery with this code.

$(".test").click(function () {initMap();});

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}

Hope this helps.

Upvotes: 1

geocodezip
geocodezip

Reputation: 161334

You need to trigger the resize event on the map after the tab becomes active (and the map has a size).

$('ul.tabs').on('click', 'a', function(e) {
  setTimeout(function() {
    google.maps.event.trigger(map, 'resize');
  }, 500);
});

code snippet:

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map
  });
}
$('ul.tabs').on('click', 'a', function(e) {
  setTimeout(function() {
    google.maps.event.trigger(map, 'resize');
  }, 500);
});
#map {
  height: 400px;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s6"><a href="#test1">Test 1</a></li>
      <li class="tab col s6"><a href="#test2" class="active">Test 2</a></li>
    </ul>
  </div>

  <div id="test1" class="col s12">

    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <!-- Replace the value of the key parameter with your own API key. -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>
  </div>

  <div id="test2" class="col s12">
    2
  </div>

</div>

Upvotes: 1

Related Questions