Google map appears after browser size changes

Question

The problem is that when I use code below that includes client key as well at the fist enter pages shows empty google map and if I resize a little bit browser the map appears.

I cannot figure out what is wrong... Any help please.

$(document).on("pagecreate", function (event) { 
       initMap();
        });

  function initMap()
  { 
                var map_options = {
    center: new google.maps.LatLng(-16.5112321,-68.1224865),
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.ROADMAP
          }

     map_canvas = document.getElementById('googleMap');
     var map = new google.maps.Map(map_canvas, map_options);
  }

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap" style="width:100%;height:400px;"></div>

@APAD1 I found the duplicated question but its solution does not work for me http://stackoverflow.com/questions/35742908/google-map-show-after-screen-resize — NoWar, Mar 16 '17 at 20:12

score 2 · Accepted Answer · answered Mar 16 '17 at 20:36

I have used TABS of jQuery mobile so solution is to init map then TAB is active. The answer #55 was found here https://issuetracker.google.com/issues/35818323

   $( "#tabs" ).on( "tabsactivate", function( event, ui ) {
                initMap();
    } );

Google map appears after browser size changes

1 Answers1

Linked