Home/ Questions/Q 7731757
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T06:33:40+00:00

I am new to mobile application development, and I am integrating Google Maps in

  • 0

I am new to mobile application development, and I am integrating Google Maps in my app by jQuery mobile. When I change pages by giving a reference to an html page, it is not showing the map. In fact, it is not getting in to the function of that file.

map.html:

   <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%;}
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBUuNWrZ1zjJ7yKV3DJL2ylrhj9BAcYo8A&sensor=true&language=ka">
    </script>
    <script type="text/javascript">
     function initialize() {
         alert("map");
        var myOptions = {
          center: new google.maps.LatLng(17.38504, 78.48667),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
   </script>

  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>

  </body>
</html>

index.html:

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body >
    <div data-role="page" data-theme="b" data-fullscreen="true">
        <div data-role="header" >
            <h1>Home</h1>
        </div>
        <div data-role="content" data-theme="a">
            <div class="ui-grid-b">
                <a href="src/contact.html" ><img src="iphone-contacts-icon.jpg" width="72" height="72"  hspace="10" vspace="20"/></a>
                <a href="src/map.html"><img src="Maps-icon.png" width="72" height="72" hspace="10" vspace="20"/></a>
                <a><img src="ExamIcon.jpg" width="72" height="72" hspace="10" vspace="20"/></a>
            </div><!-- /grid-b -->

</div><!-- Content-->
        <div data-role="footer" >
            <h1>footer</h1>
        </div>  <!-- footer-->
    </div>  <!-- page-->


</body>
</html>

Please help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I got your pages working by rearranging some of the javascript. This is what the two html pages look like now:

    Index.html

    <!DOCTYPE html>
<head>
<title>Untitled Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBUuNWrZ1zjJ7yKV3DJL2ylrhj9BAcYo8A&sensor=true&language=ka">
    </script>
    <script type="text/javascript">

      $('#Map').live("pageinit", function (event) {
         alert("map");
        var myOptions = {
          center: new google.maps.LatLng(17.38504, 78.48667),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      });
   </script>
</head>
<body >
    <div data-role="page" data-theme="b" data-fullscreen="true">
        <div data-role="header" >
            <h1>Home</h1>
        </div>
        <div data-role="content" data-theme="a">
            <div class="ui-grid-b">
                <a href="src/contact.html" ><img src="iphone-contacts-icon.jpg" width="72" height="72"  hspace="10" vspace="20"/></a>
                <a href="map.html"><img src="Maps-icon.png" width="72" height="72" hspace="10" vspace="20"/></a>
                <a><img src="ExamIcon.jpg" width="72" height="72" hspace="10" vspace="20"/></a>
            </div><!-- /grid-b -->

</div><!-- Content-->
        <div data-role="footer" >
            <h1>footer</h1>
        </div>  <!-- footer-->
    </div>  <!-- page-->


</body>
</html>

    map.html

     <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  </head>
  <body onload="initialize()">

    <div data-role="page" id="Map">
        <style type="text/css">
      html { height: 100%; width: 100%; }
      body { height: 100%; width: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%; width: 100%; }
      #Map { height: 100%; width: 100%; }
    </style>
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </div>
  </body>
</html>

    The reason why your javascript wasn’t loading before is because jQuery Mobile doesn’t load the entire document of subsequent pages. It only loads the specified div containing the attribute data-role=”page” or if such a div doesn’t exist, it loads the body of the document.
    The reason why it doesn’t load the head of the document is because it tries to avoid loading the same scripts multiple timese.

    Hope this helps you out.

    EDIT:

    in this case you could also embed the map page into your index.html like this:

    <!DOCTYPE html>
<head>
<title>Untitled Document</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBUuNWrZ1zjJ7yKV3DJL2ylrhj9BAcYo8A&sensor=true&language=ka">
    </script>
    <script type="text/javascript">

      $('#Map').live("pageinit", function (event) {
         alert("map");
        var myOptions = {
          center: new google.maps.LatLng(17.38504, 78.48667),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      });
   </script>
</head>
<body >
    <div data-role="page" data-theme="b" data-fullscreen="true">
        <div data-role="header" >
            <h1>Home</h1>
        </div>
        <div data-role="content" data-theme="a">
            <div class="ui-grid-b">
                <a href="src/contact.html" ><img src="iphone-contacts-icon.jpg" width="72" height="72"  hspace="10" vspace="20"/></a>
                <a href="#Map"><img src="Maps-icon.png" width="72" height="72" hspace="10" vspace="20"/></a>
                <a><img src="ExamIcon.jpg" width="72" height="72" hspace="10" vspace="20"/></a>
            </div><!-- /grid-b -->

</div><!-- Content-->
        <div data-role="footer" >
            <h1>footer</h1>
        </div>  <!-- footer-->
    </div>  <!-- page-->

    <div data-role="page" id="Map">
        <style type="text/css">
      html { height: 100%; width: 100%; }
      body { height: 100%; width: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%; width: 100%; }
      #Map { height: 100%; width: 100%; }
    </style>
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </div>
</body>
</html>
    • 0