javascript - Google map API resize doesn't work -

i have implement google map api. have 2 maps loading on same page. 1 directly shown when load page. second show when click on button. modal map appear. modal display none display block after click. map appear no in fullsize. here js append google map.

$(document).ready(function() {         function getdistancefromlatloninkm(lat1,lon1,lat2,lon2) {             var r = 6371;             var dlat = deg2rad(lat2-lat1);             var dlon = deg2rad(lon2-lon1);              var = math.sin(dlat/2) * math.sin(dlat/2) + math.cos(deg2rad(lat1)) * math.cos(deg2rad(lat2)) * math.sin(dlon/2) * math.sin(dlon/2);              var c = 2 * math.atan2(math.sqrt(a), math.sqrt(1-a));              var d = r * c;             return d.tofixed(0);         }          function deg2rad(deg) {           return deg * (math.pi/180)         }          function initialize() {             $('.map_canvas').each(function(index, element) {                 var markers = new array();                 var map_canvas = element;                 var map_options = {                     center: new google.maps.latlng(<?php echo !empty($user['coord'][0]) ? $user['coord'][0] : '0' ; ?>, <?php echo !empty($user['coord'][1]) ? $user['coord'][1] : '0'; ?>),                     zoom: 12,                     scrollwheel: false,                     maptypeid: 'roadmap'                 };                  var map = new google.maps.map(map_canvas, map_options);                  if (navigator.geolocation) {                     navigator.geolocation.getcurrentposition(function(position) {                         markers = [                             ['user', <?php echo !empty($user['coord'][0]) ? $user['coord'][0] : '0' ; ?>, <?php echo !empty($user['coord'][1]) ? $user['coord'][1] : '0'; ?>],                             ['you', position.coords.latitude, position.coords.longitude]                         ];                          var dist = getdistancefromlatloninkm(                             <?php echo !empty($user['coord'][0]) ? $user['coord'][0] : '0' ; ?>,                             <?php echo !empty($user['coord'][1]) ? $user['coord'][1] : '0'; ?>,                             position.coords.latitude,                             position.coords.longitude                         );                          $('#left-content-map h2').append("<span class='medium-500 lower-case'> à " + dist + " km</span>");                          (i = 0; < markers.length; i++) {                             var position = new google.maps.latlng(markers[i][1], markers[i][2]);                             marker = new google.maps.marker({                                 position: position,                                 map: map,                             });                         }                     });                 } else {                     markers = [                         ['user', <?php echo !empty($user['coord'][0]) ? $user['coord'][0] : '0' ; ?>, <?php echo !empty($user['coord'][1]) ? $user['coord'][1] : '0'; ?>],                     ];                      (i = 0; < markers.length; i++) {                         var position = new google.maps.latlng(markers[i][1], markers[i][2]);                         marker = new google.maps.marker({                             position: position,                             map: map,                         });                     }                 }                  google.maps.event.adddomlistener(window, "resize", function() {                     var center = map.getcenter();                     google.maps.event.trigger(map, "resize");                     map.setcenter(center);                 });             });              var open = false;             $("#show-full-map").on("click", function(){                 modal.init($('#full-map'))                 modal.popup(function(map) {                     google.maps.event.trigger(map, "resize");                 }););                 open = true;             });              $('.close-modal').on("click", function(){                 modal.popin();                 open = false;             });         }          google.maps.event.adddomlistener(window, 'load', initialize); }); 

thank futur response.

ok found solution.

i add settimeout 1 execute function trigger resize event.

$("#show-full-map").on("click", function(){             modal.init($('#full-map'))             modal.popup();             var refresh = function() {                 var center = map.getcenter();                     google.maps.event.trigger(map, "resize");                     map.setcenter(center);                 }                 settimeout(refresh, 500);                 open = true;             });