jquery Moble + google maps does not render as a mobile page

jquery Moble + google maps does not render as a mobile page

Hi,

I'm attempting at creating a new mobile site using jquery mobile and google maps.  I have a map loading with the directions services in what I think should be a jquery mobile site but when I view it on a mobile device it looks like a desktop version and is extremely small. 

The display is small and the buttons aren't rendering as a jquery mobile view.   I'm fairly new at jquery and jquery mobile so I maybe missing something simple.

Here is a code sample: http://jsfiddle.net/Nemesiss/J82UJ/

below is my page code:

  1.  <!DOCTYPE html> <html> <head> <title>jQuery mobile with Google maps geo directions example</title> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" /> <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="stylesheet" href="jQuerythemes/jquery.mobile.theme-1.4.0.min.css" /> <link rel="stylesheet" href="jQuerythemes/jquery.mobile.structure-1.4.0.min.css" /> <link rel="stylesheet" href="jQuerythemes/jquery.mobile.icons-1.4.0.min.css" /> <script src="jQuerythemes/jquery-1.10.2.min.js"></script> <script src="jQuerythemes/jquery.mobile-1.4.0.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script> <script type="text/javascript"> $(document).on("pageinit", "#map_page", function () { initialize(); }); $(document).on('click', '#submit', function (e) { e.preventDefault(); calculateRoute(); }); var directionDisplay, directionsService = new google.maps.DirectionsService(), map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var mapCenter = new google.maps.LatLng(-34.397, 150.644); var myOptions = { mapTypeControl: false, zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP, center: mapCenter } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directions")); } function calculateRoute() { var selectedMode = $("#mode").val(), start = $("#from").val(), end = $("#to").val(); if (start == '' || end == '') { // cannot calculate route $("#results").hide(); return; } else { var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode[selectedMode] }; directionsService.route(request, function (response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); $("#results").show(); /* var myRoute = response.routes[0].legs[0]; for (var i = 0; i < myRoute.steps.length; i++) { alert(myRoute.steps[i].instructions); } */ } else { $("#results").hide(); } }); } } </script> </head> <body> <div data-role="page" id="map_page"> <div data-role="header"> <h1><a href="#"></a>Google Directions Map</h1> <a href="http://goto this site onclick/" data-role="button" id="submit">Return</a> </div> <div data-role="content"> <div > <div id="map_canvas" style="width: 100%; height: 300px"></div> <div data-role="fieldcontain"> <label for="mode" class="select">Transportation method:</label> <select name="select-choice-0" id="mode"> <option value="TRANSIT">Public Transit</option> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option> </select> </div> <div data-role="fieldcontain"> <label for="from">From</label> <input type="text" id="from" value="My City" /> </div> <div data-role="fieldcontain"> <label for="to">To</label> <input type="text" id="to" value="My City" /> </div> <a data-icon="search" data-role="button" href="#" id="submit">Get directions</a> </div> <div id="results" style="display:none;"> <div id="directions"></div> </div> </div> </div> </body> </html>
Can someone tell me why the page isn't rendering properly?

thanks.