javascript - google maps map under materialize tab -
i tried create site looks fast changing content dynamically, use tab system form materialize, works great, except google maps map generate via api shows blank window: map
it shows map when resize window or if page active, active isn't solution!
thanks in advance possible solutions/fixes
i created jsfiddle 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 value of key parameter 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%; }
please try code. because google directly calling initmap()
when script execute @ time due reason map object not initialised reason need call initmap()
way.
remove &callback=initmap js link 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 jquery 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 helps.
Comments
Post a Comment