So, I'm trying to make this application that uses the google maps API. It worked with Android, but when I tried it in Windows Phone Emulator, he said: "The application cannot load remote web content in a local context." Now I was looking a bit, and this can be expected (I also tried a solution using iframe ), did not work.). The question is how can I fix this. Can I use Google Maps with Windows Phone and Cordova, or should I use a different Maps API?
Code that works with Android, but not with WP: - Thanks to everyone.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Security-Policy" content=" "> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>BlankCordovaApp1</title> <link href="css/index.css" rel="stylesheet" /> <link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" /> <script src="scripts/jquery-2.1.4.js"></script> <script src="scripts/jquery.mobile-1.4.5.js"></script> <script> $(document).on("pagecreate","#map-page", getMaps); function createMap() { console.log("Reached createMap() ") var mapOptions = { center: new google.maps.LatLng(37.98392, 23.71889), zoom: 11 }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); } function getMaps() { $.getScript('http://maps.googleapis.com/maps/api/js?callback=createMap'); console.log("Got Maps"); } </script> </head> <body> <div data-role="page" id="login" data-theme="b"> <div data-role="content"> <p>Page 1</p> <a href="#map-page" class="ui-btn">Page 2</a> </div> </div> <div data-role="page" id="map-page"> <div data-role="header"> <h1> Header </h1> </div> <div data-role="content"> <div id="map" style="height: 400px;width: 100%"></div> <a href="#" class="ui-btn" data-rel="back">Go Back</a> </div> <div data-role="footer" style="text-align:center" data-position="fixed"> <p> Footer </p> </div> </div> <script src="cordova.js"></script> <script src="scripts/platformOverrides.js"></script> <script src="scripts/index.js"></script> </body> </html>
source share