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

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

  21. }
  22. </style>
  23.        


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

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

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

  30. <div data-role="content">
  31.     
  32.     <div id="map_canvas"></div>

  33. <div data-role="footer" data-id="foo1" data-position="fixed" data-theme="b" class="nav-custom">
  34. <div data-role="navbar" class="nav-custom">
  35. <ul>
  36.         <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>
  37. <li><a href="percorsi.html"id="percorsonav" data-icon="custom"  data-theme="b" data-iconpos="top" data-iconshadow="true">Percorsi</a></li>
  38. <li><a href="arte.html" id="artenav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Arte</a></li>
  39.             <li><a href="utility.html" id="utilitynav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">Utility</a></li>
  40.             <li><a href="news.html" id="newsnav" data-icon="custom" data-theme="b" data-iconpos="top" data-iconshadow="true">News</a></li>
  41. </ul>
  42. </div>
  43.    </div>
  44.     </div><!-- /content -->

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

  46. </div>


  47. <!-- /Script -->

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

  54. $('#map_canvas').gmap3({
  55.   getgeoloc:{
  56.     callback : function(latLng){
  57.       if (latLng){
  58.         $(this).gmap3({
  59.           marker:{ 
  60.             latLng:latLng
  61. , options:{icon: "img/me.png;"}
  62.           },
  63.           map:{
  64.             options:{
  65.               zoom: 12,
  66.  mapTypeControl:false,
  67.  navigationControl: false,
  68.               scrollwheel: false,
  69.               streetViewControl: false,
  70.             }
  71.           },
  72.         });
  73.       }
  74.     }
  75.   }
  76. });

  77. </script>





  78. <!-- /Script -->

  79. </body>
  80. </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