jQuery mobile，Google Map不适合页面

Question

我在可折叠集中有一张地图。地图显示了设置位置和用户当前位置之间的路线。如果我加载页面，地图宽度太大，不适合页面大小。任何人都可以帮忙??

这是我的标题：

<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable = no"> 
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />


    <link rel="stylesheet" href="styles/styles.css" />



    <!-- Google Maps-->
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>      
 <script type="text/javascript">
        google.load("maps", "3", {'other_params':'sensor=true'});
    </script>

<script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>

</head>

这是我的身体：

<div data-role="page" id="map">
    <div data-role="header" data-tap-toggle="false"  >
     <a href="#adel1" data-icon="back" data-iconpos="notext" ></a>
    <a href="index.html#home" data-icon="home" data-iconpos="notext" ></a>

        <h1>Titel</h1>
</div>

<div data-role="collapsible-set"data-theme="b" >

    <div data-role="collapsible"  >
    <h3>Informationen</h3>
    <p>I'm the collapsible set content for section 1.</p>
    </div>


    <div data-role="collapsible" id="map">
    <h3>Route</h3>

<div id="googleMap" data-role="content" style="width:100%; height:300px;"></div>

    </div>


    <div data-role="collapsible">
    <h3>Mit Freunden teilen</h3>
    <p>I'm the collapsible set content for section 2.</p>
    </div>

    <script type="text/javascript">
$('#map').on("pageinit", function() {       
    var positionsAusgabe = function(position){
        var longpos = position.coords.longitude;
        var latpos = position.coords.latitude;    


        $('#googleMap').gmap(
            'displayDirections', {
                'origin': new google.maps.LatLng(latpos,longpos), 
                'destination': '47.786259,9.880954', 
                'travelMode': google.maps.DirectionsTravelMode.DRIVING 
            }, 
            function(success, response) {
                if (success) {
                    return new google.maps.LatLng(latpos, longpos);                         
                } else {
                    alert('Die Karte und/oder Route konnte nicht geladen werden');
                    $('#googleMap').gmap('getService', 'DirectionsRenderer').setMap(null);
                }
                google.maps.event.trigger(map);

            });

    };
    navigator.geolocation.getCurrentPosition(positionsAusgabe);

});

</script>
</div>

这是CSS：

.googleMap img{
      max-width:none;
}
.googleMap { 
padding-top:10%;
padding-bottom:10%;
height:auto;
width:100%;
max-height:none;
overflow:hidden;
display:block; }