Home/ Questions/Q 8796199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T23:34:03+00:00

I am writing an application that uses PhoneGap and needs to integrate Google Maps

  • 0

I am writing an application that uses PhoneGap and needs to integrate Google Maps in it. I have used this sample from the online documentation provided by Google:

   <!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="https://maps.googleapis.com/maps/api/js?key=AIzaSyDlFl3vPEbgzrr-1KX5E20z_1DowB2ASus&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

This works correctly if I open it in my web browser (Chrome, FF, IE…). However, in my emulator (and device as well) it only shows a blank page. Any tips?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This problem occured since I was using multiple html pages on the same application. Since phonegap will use ajax calls to replace the dom of the index page, it fails to load the scripts on those pages as well.

    Two solutions exist here:

    1. To use only a single html page

    2. To load the second page using

      rel=”external”

    • 0