谷歌地圖API v3顯示半地圖？

我正在Jquery Mobile中做一個項目，並且遇到了Google API的問題。當我從不同頁面導航到MapPage時，MapPage自身顯示地圖確定，但是當從HomePage移動到MapPage時，它僅顯示地圖的一半。如果我手動刷新或調整大小映射它將修復它 - 但我已經嘗試map.resize（）沒有運氣，所以我需要一個不同的解決方案。谷歌地圖API v3顯示半地圖？

enter image description here

我已經附加了主頁的我的HTML代碼和MapPage如下：

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <meta name="description" content="Project - Mobile" /> 
    <meta name="author" content="Yuval Vardi" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <title>RentAcar</title> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="JS/jquery-2.0.2.js"></script> 
    <script src="JS/jquery.mobile-1.3.1.js"></script> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script src="JS/mapScript.js" > </script> 
    </head> 

<body> 
<div id="HomePage" data-role="page" data-add-back-btn="true"> 
    <div data-role="header"> 

</div> 
    <div data-role="content"> 
    <a href="#calculate" data-role="button" data-theme="b" data-icon="gear" data-iconpos="top">Trip Info</a> 
    </div> 
<div data-role="footer" class="mainFooter"> 
    <h2> &copy; Copyright Yuval Vardi </h2> 
    <p class="yearNow"> </p> 
    </div> 

    </div> 



<div id="calculate" data-role="page" data-add-back-btn="true"> 

     <div data-role="header"> 

     </div> 

     <div data-role="content"> 

      <table id="mapTable"> 
       <tr> 
        <td> 
         <p>Pickup location</p> 
        </td> 
        <td></td> 
        <td> 
         <p>Where do you go?</p> 
        </td> 
       </tr> 
       <tr> 
        <td> 
          <input id="startInput" type="text" value="" placeholder="Start location" /> 
        </td> 
        <td></td> 
        <td> 
         <input type="text" id="end" placeholder="Return location"/> 
        </td> 
       </tr> 
       <tr> 
        <td data-role="controlgroup"> 
         <button id="myLocation" onclick="getMarker()" data-role="button" data-theme="e" > Find me </button> 
        </td> 
        <td></td> 
        <td data-role="controlgroup"> 
          <button onclick="calcRoute()" data-theme="b" > Calculate rout </button> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="3"> 

        <div id="map-canvas" style="width:400px; height:280px;"> 
        </div> 

        </td> 
       </tr> 

      </table> 

     </div> 

     <div data-role="footer" class="mainFooter"> 
      <h2> &copy; Copyright Yuval Vardi </h2> 
      <p class="yearNow"> </p> 
      <a class="ui-btn-right" href="#HomePage" data-role="button" data-icon="home" data-iconpos="top" >Home</a> 

     </div> 

    </div> 

    </body></html>

我的JavaScript文件：

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!" 
    }); 
}

來源

2013-07-11 user2574404

地圖div具有零寬度。要使用百分比寬度，您必須定義其所有父項的寬度（或至少達到可用於計算寬度的固定大小的元素）。

見Mike Williams' Google Maps API v2 tutorial page on percentage sizing

來源

2013-07-11 22:44:03 geocodezip

改爲固定寬度：400像素，並試圖寬度添加到所有的父母 - 仍然沒有工作。 – user2574404

查看本帖回覆： [鏈接]（http://stackoverflow.com/questions/15051796/google-map-only-show-half-screen） – skashi

-1

你需要調用checkResize（）API函數。像這樣：

map = new google.maps.Map(document.getElementById("map"), mapOptions); 
map.checkResize()

對我來說這一次的工作以及

來源

2014-09-10 16:24:37 Nosheen

'TypeError：undefined不是函數'（-1） – Cody

谷歌地圖API v3顯示半地圖？

回答

相關問題