google map showing blank page in jquery mobile

google map showing blank page in jquery mobile

This google map works when called directly on the browser but displays a blank page when called from another page unless i refreshed it. any help
  2. <!DOCTYPE html>
  3. <html>
  4.     <head> 
  5. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1" />
  7.         <meta name="apple-mobile-web-app-capable" content="yes" />
  8.         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  9.         <title>Create Id</title>
  10.         <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
  11.       
  12.         <script src="javascript/jquery.min.js">
  13.         </script>
  14.         <script src="javascript/jquery.mobile-1.2.0.min.js">
  15.         </script>
  16.         <script src="javascript/my.js">
  17.         </script>
  18.         <!-- User-generated css -->
  19.         <style>
  20.         </style>
  21.         <!-- User-generated js -->
  22.         <script>
  23.             try {

  25.     $(function() {

  27.     });

  29.   } catch (error) {
  30.     console.error("Your javascript has an error: " + error);
  31.   }
  32.         </script>
  33.     </head>
  34.    

  36. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  37. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  38. <script type="text/javascript">
  39. var geocoder = new google.maps.Geocoder();

  41. function geocodePosition(pos) {
  42.   geocoder.geocode({
  43.     latLng: pos
  44.   }, function(responses) {
  45.     if (responses && responses.length > 0) {
  46.       updateMarkerAddress(responses[0].formatted_address);
  47.     } else {
  48.       updateMarkerAddress('Cannot determine address at this location.');
  49.     }
  50.   });
  51. }

  53. function updateMarkerStatus(str) {
  54.   document.getElementById('markerStatus').innerHTML = str;
  55. }

  57. function updateMarkerPosition(latLng) {
  58.   document.getElementById('info').innerHTML = [
  59.     latLng.lat(),
  60.     latLng.lng()
  61.   ].join(', ');
  62. }

  64. function updateMarkerAddress(str) {
  65.   document.getElementById('address').innerHTML = str;
  66. }





  72. function initialize() {
  73.   var latLng = new google.maps.LatLng(22.5140014, 39.10491239999999);
  74.   var map = new google.maps.Map(document.getElementById('mapCanvas'), {
  75.     zoom: 8,
  76.     center: latLng,
  77.     mapTypeId: google.maps.MapTypeId.ROADMAP
  78.   });
  79.   var marker = new google.maps.Marker({
  80.     position: latLng,
  81.     title: 'Point A',
  82.     map: map,
  83.     draggable: true
  84.   });
  85.   
  86.   // Update current position info.
  87.   updateMarkerPosition(latLng);
  88.   geocodePosition(latLng);
  89.   
  90.   // Add dragging event listeners.
  91.   google.maps.event.addListener(marker, 'dragstart', function() {
  92.     updateMarkerAddress('Dragging...');
  93.   });
  94.   
  95.   google.maps.event.addListener(marker, 'drag', function() {
  96.     updateMarkerStatus('Dragging...');
  97.     updateMarkerPosition(marker.getPosition());
  98.   });
  99.   
  100.   google.maps.event.addListener(marker, 'dragend', function() {
  101.     updateMarkerStatus('Drag ended');
  102.     geocodePosition(marker.getPosition());
  103.   });
  104. }

  106. // Onload handler to fire off the app.
  107. google.maps.event.addDomListener(window, 'load', initialize);
  108. </script>



  112.         <!-- Home -->
  113.      <body> 








  122.    
  123.     <div data-role="page" id="page1">
  124. <font face="Eurostile" color=green>Foreigners Registration </font><br>

  126. <style>
  127.   #mapCanvas {
  128.     width: 500px;
  129.     height: 400px;
  130.     float: left;
  131.   }
  132.   #infoPanel {
  133.     float: left;
  134.     margin-left: 10px;
  135.   }
  136.   #infoPanel div {
  137.     margin-bottom: 5px;
  138.   }
  139.   </style>
  140.   
  141.   <div id="mapCanvas"></div>
  142.   <div id="infoPanel">
  143.     <b>Marker status:</b>
  144.     <div id="markerStatus"><i>Click and drag the marker.</i></div>
  145.     <b>Current position:</b>
  146.     <div id="info"></div>
  147.     <b>Closest matching address:</b>
  148.     <div id="address"></div>
  149.   </div>
    150. </html>