<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showmap">click to show map</a>
<div class="hidden" style="display:none;">
<div id="mapp" style="height:300px; border:solid 1px #ccc;"></div>
</div>
<script>
$('.showmap').click(function(){
$('.hidden').show();
});
</script>
<script>
function myMap(){
var map = new google.maps.Map(document.getElementById('mapp'), {
center: {lat: -4.131140, lng: 120.861760},
zoom: 2,
mapTypeId: 'roadmap'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAuTFPlEcDfHzqTWBaSzfaGPWIJpyOUTk&callback=myMap"></script>
Hide the map after it has been loaded then it works just fine.
.hidden div {
opacity: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showmap">click to show map</a>
<div class="hidden">
<div id="mapp" style="height:300px; border:solid 1px #ccc;"></div>
</div>
<script>
$('.showmap').click(function() {
$('.hidden').removeClass("hidden")
});
</script>
<script>
function myMap() {
var map = new google.maps.Map(document.getElementById('mapp'), {
center: {
lat: -4.131140,
lng: 120.861760
},
zoom: 2,
mapTypeId: 'roadmap'
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAuTFPlEcDfHzqTWBaSzfaGPWIJpyOUTk&callback=myMap"></script>