All geek questions in one place

Google Maps PhoneGap - Map Not Displaying

I am writing an application that uses PhoneGap and needs to integrate Google Maps into it. I 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, only a blank page is displayed in the emulator (and in the device). Any tips?

+4
source share
1 answer

This problem has arisen since I used several html pages in one application. Since phonegap will use ajax calls to replace the dom of the index page, it will also not be able to load scripts on these pages.

There are two solutions here:

  • To use only one html page

  • To load the second page with

    rel = "external"

+6
source

Source: https://habr.com/ru/post/1443992/

More articles:


All Articles