Problem with map and different pages.

Problem with map and different pages.

Hi. i'm your worst nightmare, a newbie :D
This is my problem:
I'm using gmap3 to load maps on two different pages.
On the first page (index.html) the map works correctly, but when i go to second page the map doesn't appear.

this is a link to see my issue ->  click here

and click to the button "Mappa"

And this is the code:
Index.html

  2. <!DOCTYPE html> 
  3. <html> 
  4. <head> 
  5. <title>page1</title> 
  6. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  7. <link rel="stylesheet" href="jqm/mango.css" />
  8. <link rel="stylesheet" href="jqm/jquery.mobile.structure-1.2.0.css" />
  9.         
  10. <style>
  12. #map_canvas {
  13. width: 100%;
  14. height: 200px;
  15. }
  16. .nav-custom .ui-btn .ui-btn-inner { padding-top: 35px !important; }
  17. .nav-custom .ui-btn .ui-icon { width: 40px!important; height: 28px!important; margin-left: -20px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
  19. #percorsonav .ui-icon { background:  url(img/icon/percorsoicon.png) 50% 50% no-repeat; background-size: 27px 27px; }
  21. #mappanav .ui-icon { background: url(img/icon/mapicon.png) 50% 50% no-repeat; background-size: 30px 33px;  }
  23. #artenav .ui-icon { background:  url(img/icon/arteicon.png) 50% 50% no-repeat;  background-size: 24px 26px; }
  24. #utilitynav .ui-icon { background: url(img/icon/utilityicon.png) 50% 50% no-repeat;  background-size: 30px 24px; }
  25. #newsnav .ui-icon { background:  url(img/icon/newsicon.png) 50% 50% no-repeat;  background-size: 31px 27px; }

  27. }
  29. </style>
  30.        


  33. </head> 
  34. <body style="margin-left:0px;"> 

  36. <div id="one" data-role="page">

  38. <div data-role="header">
  39. <h1><img src="img/logo.png" width="121" height="32" alt="be.Cycle"></h1>
  40. </div><!-- /header -->

  42. <div data-role="content">
  43.     
  44.     <div id="map_canvas"></div>

  46. <div data-role="footer" data-id="foo1" data-position="fixed" data-theme="b" class="nav-custom">
  47. <div data-role="navbar" class="nav-custom">
  48. <ul>
  49.         <li><a href="mappa.html" data-transition="slide" id="mappanav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Mappa</a></li>
  50. <li><a href="percorsi.html"id="percorsonav" data-icon="custom"  data-theme="b" data-iconpos="top" data-iconshadow="true">Percorsi</a></li>
  51. <li><a href="arte.html" id="artenav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Arte</a></li>
  52.             <li><a href="utility.html" id="utilitynav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Utility</a></li>
  53.             <li><a href="news.html" id="newsnav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">News</a></li>
  54. </ul>
  55. </div>
  56.    </div>
  57.     </div><!-- /content -->

  59. </div><!-- /page -->

  61. </div>


  64. <!-- /Script -->

  66. <script src="jqm/jquery-1.8.3.min.js"></script>
  67. <script src="jqm/jquery.mobile-1.2.0.min.js"></script>
  68.        <script type="text/javascript" src="jqm/gmap3.min.js"></script>
  69.         <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
  70.         
  71. <script type="text/javascript">

  73. $('#map_canvas').gmap3({
  74.   getgeoloc:{
  75.     callback : function(latLng){
  76.       if (latLng){
  77.         $(this).gmap3({
  78.           marker:{ 
  79.             latLng:latLng
  80. , options:{icon: "img/me.png;"}
  81.           },
  82.           map:{
  83.             options:{
  84.               zoom: 12,
  85.  mapTypeControl:false,
  86.  navigationControl: false,
  87.               scrollwheel: false,
  88.               streetViewControl: false,
  89.             }
  90.           },
  91.         });
  92.       }
  93.     }
  94.   }
  95. });

  97. </script>





  103. <!-- /Script -->

  105. </body>
  106. </html>
second page:

  1. <!DOCTYPE html>
    <html>
    <head>
    <title>be.Cycle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jqm/mango.css" />
    <link rel="stylesheet" href="jqm/jquery.mobile.structure-1.2.0.css" />
    <style>
    #map_canvas2 {
    width: 100%;
    height: 200px;
    }
    .nav-custom .ui-btn .ui-btn-inner { padding-top: 35px !important; }
    .nav-custom .ui-btn .ui-icon { width: 40px!important; height: 28px!important; margin-left: -20px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
    #percorsonav .ui-icon { background: url(img/icon/percorsoicon.png) 50% 50% no-repeat; background-size: 27px 27px; }
    #mappanav .ui-icon { background: url(img/icon/mapicon.png) 50% 50% no-repeat; background-size: 30px 33px; }
    #artenav .ui-icon { background: url(img/icon/arteicon.png) 50% 50% no-repeat; background-size: 24px 26px; }
    #utilitynav .ui-icon { background: url(img/icon/utilityicon.png) 50% 50% no-repeat; background-size: 30px 24px; }
    #newsnav .ui-icon { background: url(img/icon/newsicon.png) 50% 50% no-repeat; background-size: 31px 27px; }

    }
    </style>
    <script src="jqm/cordova-2.3.0.js"></script>
    <script type="text/javascript">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
    }

    </script>



    </head>
    <body style="margin-left:0px;">

    <div id="one" data-role="page">

    <div data-role="header">
    <h1><img src="img/logo.png" width="121" height="32" alt="be.Cycle"></h1>
    </div><!-- /header -->

    <div data-role="content">
    <div id="map_canvas2"></div>

    <div data-role="footer" data-id="foo1" data-position="fixed" data-theme="b" class="nav-custom">
    <div data-role="navbar" class="nav-custom">
    <ul>
    <li><a href="mappa.html" data-transition="slide" id="mappanav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Mappa</a></li>
    <li><a href="percorsi.html"id="percorsonav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Percorsi</a></li>
    <li><a href="arte.html" id="artenav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Arte</a></li>
    <li><a href="utility.html" id="utilitynav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Utility</a></li>
    <li><a href="news.html" id="newsnav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">News</a></li>
    </ul>
    </div>
    </div>
    </div><!-- /content -->

    </div><!-- /page -->

    </div>


    <!-- /Script -->

    <script src="jqm/jquery-1.8.3.min.js"></script>
    <script src="jqm/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="jqm/gmap3.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
    <script type="text/javascript">

    $('#map_canvas2').gmap3({
    getgeoloc:{
    callback : function(latLng){
    if (latLng){
    $(this).gmap3({
    marker:{
    latLng:latLng
    , options:{icon: "img/me.png;"}
    },
    map:{
    options:{
    zoom: 2,
    }
    },
    });
    }
    }
    }
    });

    </script>



    <!-- /Script -->

    </body>
    </html>


How can i solve this problem?



Thx a lot

Marco