I am trying to load three cards on one page. These divs are in collapse. Below is my html:
<div class="panel panel-default"> <div id="bangkokloc" class="panel-heading" role="tab" id="headingOne"> <div class="locat-block"> <div class="flex-box"> <div class="loc-data"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <div class="flex-box"> <div class="date-sec"> <p class="day">05</p> <p class="time">nov. 2017</p> </div> <div class="detail-sec"> <h3 class="loc-title">Bangkok, Thailand</h3> <p class="loc-sub">Centara Grand & Bangkok Convention Centre</p> <p class="loc-detail">999/99 Rama 1 Road, Pathumwan Bangkok 10330, Thailand<br>13:00 registration; 14:00 - 17:00 seminar</p> </div> </div> </a> </div> <div class="loc-act"> <a href="#booknow" class="com-btn">Get your Ticket!</a> </div> </div> </div> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="map-wrap"> <div id="map1"></div> </div> </div> </div> </div>
Another similar collapse persists with the following div <div id="map"></div>
Below is my script:
<script src="https://maps.googleapis.com/maps/api/js?key=*MyKey*&callback=initMap" async defer></script> <script> function initMap() { var uluru = {lat: 3.154301, lng: 101.712720, title: 'Kuala Lumpur Convention Centre'}; var map = new google.maps.Map(document.getElementById('map'), { zoom: 16, scrollwheel: false, center: uluru }); var marker = new google.maps.Marker({ position: uluru, map: map }); var uluru1 = {lat: 13.7503107, lng: 100.5367808, title: 'Centara Grand & Bangkok Convention at CentralWorld'}; var map1 = new google.maps.Map(document.getElementById('map1'), { zoom: 16, scrollwheel: false, center: uluru1 }); var marker = new google.maps.Marker({ position: uluru1, map: map1 }); } </script>
This map display is only in the first div, and not in the other two divs. I have provided a link here .
Any help would be appreciated. Thank you in advance.:)
My attempt to resize the map:
$(".collapse").on('show.bs.collapse', function () { google.maps.event.trigger(map, "resize"); google.maps.event.trigger(map1, "resize"); google.maps.event.trigger(map2, "resize"); })
But no effects.
source share