Conflit liens js jquery mobile google maps

salut j'ai un probleme de conflit des lien JS dans avec code html5 + JQUERY MOBILE quand je veux inserer une google map dans ma page je peux pas elle s'affiche tres petit par contre le heigth de la page je l'ai fixé 320 px en css

l'ordre des liens css et js dans le code HTML
*****************************************************************************************
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link href="css/style.css" type="text/css" rel="stylesheet" />
        <link href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet" /> 
        <script src="js/jquery-1.11.2.min.js"></script>
        <script src="js/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script src="gmaps.js"></script>
******************************************************************************************
code css
********************************************************
#geolocation_map{ height:450px; width:98%;}
**********************************************************
code JS
**********************************************************
var map;
                $(document).ready(function(){
                    var map = new GMaps({
                    el: '#geolocation_map',
                    lat: 36.81881,
                    lng: 10.165960000000041,
                    zoom: 12
                });
                map.addMarker({
                    lat: 36.8027780,
                    lng: 10.1797220,
                    infoWindow: {
                    content: '<h1>Welcome Welcome ya sawed lilkom </h1>' }
                });
                GMaps.geolocate({
                    success: function(position) {
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                        map.addMarker({
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                            infoWindow: {
                                content: '<p>hani hné  ;p</p>'
                            }
                        });
                    },
                error: function(error) {
                    alert('Geolocation failed: '+error.message);
                },
                not_supported: function() {
                alert("Your browser does not support geolocation");
                },
                });
                });
************************************************************
code bloc html du map
******************************************************
<div data-role="page" id="map">
            <header data-role="header">
                <div class="top_head_home"></div><br />
                <div class="fot_head_home"></div>
            </header>
            <div data-role="navbar">
                <ul>
                    <li><a href="#home" data-icon="back">retour</a></li>
                    <li><a href="#home" data-icon="home">accueil</a></li>
                    <li><a href="#rch" data-icon="search">recherche</a></li>
                </ul>
            </div>
            <section data-role="content" id="geolocation_map">
            </section>
            <footer data-role="footer" id="foot_Auth">
                <div class="top_footer_auth"></div>
                <div class="fot_footer_auth">TFM COPYRIGHT^&copy;2015</div>
            </footer>
        </div>
******************************************************