title: Google map api v3 shows half a map?
body: <p>I'm doing a project in Jquery Mobile and having a problem with the Google API. When I navigate to the MapPage from diffrent page the MapPage by itself shows the map OK, but when moving from the HomePage to MapPage it only shows half of the map. If I  manually refresh or resize map it will fix it - but I've tried map.resize() without luck so I need a different solution.</p>
  
  <p><img src="https://i.stack.imgur.com/lDKqd.png" alt="enter image description here"></p>
  
  <p>I've attached my HTML code of the HomePage and MapPage below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
       &lt;meta charset="utf-8" /&gt;
       &lt;meta name="description" content="Project - Mobile" /&gt;
       &lt;meta name="author" content="Yuval Vardi" /&gt;
       &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
       &lt;title&gt;RentAcar&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /&gt;
      &lt;script src="JS/jquery-2.0.2.js"&gt;&lt;/script&gt;
      &lt;script src="JS/jquery.mobile-1.3.1.js"&gt;&lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;script src="JS/mapScript.js" &gt; &lt;/script&gt;
      &lt;/head&gt;
  
   &lt;body&gt;
  &lt;div id="HomePage" data-role="page" data-add-back-btn="true"&gt;
       &lt;div data-role="header"&gt;
  
   &lt;/div&gt; 
     &lt;div data-role="content"&gt;  
       &lt;a href="#calculate" data-role="button"  data-theme="b" data-icon="gear" data-iconpos="top"&gt;Trip Info&lt;/a&gt;
    &lt;/div&gt;
   &lt;div data-role="footer" class="mainFooter"&gt; 
     &lt;h2&gt; &amp;copy; Copyright Yuval Vardi  &lt;/h2&gt;  
     &lt;p class="yearNow"&gt; &lt;/p&gt; 
    &lt;/div&gt; 
  
    &lt;/div&gt; 
  
  
  
   &lt;div id="calculate" data-role="page" data-add-back-btn="true"&gt; 
  
         &lt;div data-role="header"&gt;
  
         &lt;/div&gt;
  
         &lt;div data-role="content"&gt;
  
               &lt;table id="mapTable"&gt;
                   &lt;tr&gt;
                      &lt;td&gt;
                          &lt;p&gt;Pickup location&lt;/p&gt; 
                      &lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;p&gt;Where do you go?&lt;/p&gt; 
                      &lt;/td&gt;
                   &lt;/tr&gt;
                   &lt;tr&gt;
                       &lt;td&gt;
                            &lt;input id="startInput" type="text" value="" placeholder="Start location" /&gt;
                       &lt;/td&gt;
                       &lt;td&gt;&lt;/td&gt;
                       &lt;td&gt;
                           &lt;input type="text" id="end" placeholder="Return location"/&gt;
                       &lt;/td&gt;
                   &lt;/tr&gt;
                   &lt;tr&gt;
                       &lt;td data-role="controlgroup"&gt;
                           &lt;button id="myLocation" onclick="getMarker()" data-role="button" data-theme="e" &gt; Find me &lt;/button&gt; 
                       &lt;/td&gt;
                       &lt;td&gt;&lt;/td&gt;
                       &lt;td data-role="controlgroup"&gt;
                            &lt;button onclick="calcRoute()" data-theme="b" &gt; Calculate rout   &lt;/button&gt;
                       &lt;/td&gt;
                   &lt;/tr&gt;
                   &lt;tr&gt;
                      &lt;td colspan="3"&gt;
  
                      &lt;div id="map-canvas" style="width:400px; height:280px;"&gt; 
                      &lt;/div&gt; 
  
                      &lt;/td&gt;
                   &lt;/tr&gt;
  
               &lt;/table&gt;
  
         &lt;/div&gt;
  
         &lt;div data-role="footer" class="mainFooter"&gt; 
            &lt;h2&gt; &amp;copy; Copyright Yuval Vardi &lt;/h2&gt;  
            &lt;p class="yearNow"&gt; &lt;/p&gt; 
            &lt;a class="ui-btn-right" href="#HomePage" data-role="button" data-icon="home" data-iconpos="top" &gt;Home&lt;/a&gt;
  
         &lt;/div&gt;   
  
    &lt;/div&gt;
  
     &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>My javascript file:</p>
  
  <pre><code>var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  
  
  function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();   
      var israel = new google.maps.LatLng(32.0938254, 34.7786934); // the var for our initial point
      var mapOptions = {
          zoom: 7,    
          mapTypeId: google.maps.MapTypeId.ROADMAP, 
          center: israel // where to center the map on initial!        
      };
  
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      directionsDisplay.setMap(map);
  } 
  
  function calcRoute() {
      initialize();
      var start = document.getElementById('startInput').value;
      var end = document.getElementById('end').value;
      var distanceInput = document.getElementById("distance");
  
      var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
  
      directionsService.route(request, function (response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
              distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
          }
      });}
  
      google.maps.event.addDomListener(window, 'load', initialize);
  
  
      function getMarker()  {           
          if (navigator.geolocation)  {
              navigator.geolocation.getCurrentPosition(showPosition,showError);
          }
      }
  
      function showPosition(position) {
          var lat=position.coords.latitude;
          var long=position.coords.longitude;                          
          marker(lat,long); //calls the marker function
      }
  
      function showError(error)
      {
          alert ("Error loading map");
      }
  
      function marker(lat,long) {
          var myLatlng = new google.maps.LatLng(lat,long);
          var mapOptions = {
              zoom: 12,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  
      $("#startInput").attr("value",myLatlng);       
      var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title:"You are Here!"
      });
  }
  </code></pre>