javascript - loading google maps in windows phone 8.1 using webview -


i have created sample app load google maps in windows phone 8.1. using webview approch i'm not able launch google maps, please me in fixing this.. below code:

default.html:

<!doctype html> <html>  <head> <meta charset="utf-8" /> <title>maps</title>  <!-- winjs references --> <!-- @ runtime, ui-themed.css resolves ui-themed.theme-light.css or ui-themed.theme-dark.css  based on user’s theme setting. part of mrt resource loading functionality. --> <link href="/css/ui-themed.css" rel="stylesheet" /> <script src="//microsoft.phone.winjs.2.1/js/base.js"></script> <script src="//microsoft.phone.winjs.2.1/js/ui.js"></script>  <!-- maps references --> <link href="/css/default.css" rel="stylesheet" />     <script src="/js/default.js"></script>  </head> <body> <h1>google maps api on windows phone 8.1</h1> <x-ms-webview id="map" src="ms-appx-web:///map.html" style="width:500px;height:500px;"></x-ms-webview> </body> </html> 

maps.html:

<!doctype html> <html> <head> <title></title>   <script src="//microsoft.phone.winjs.2.1/js/base.js"></script> <script src="//microsoft.phone.winjs.2.1/js/ui.js"></script>  <!-- map references --> <link href="/map.css" rel="stylesheet" /> <script src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script> <script src="/map.js"></script>     </head>  <body> <div id="mapdisplay" height="500px" width="500px"></div>     </body> </html> 

maps.js:

var map; var dataresults;  function initialize() {        map = new google.maps.map(document.getelementbyid('mapdisplay'), {     zoom: 3,     center: new google.maps.latlng(40, -187.3),     maptypeid: google.maps.maptypeid.terrain }); addmarkers(); }  eqfeed_callback = function (results) {    dataresults = results; }  function addmarkers() {   (var = 0; < dataresults.features.length; i++) {     var quake = dataresults.features[i];     var coors = quake.geometry.coordinates;     var latlong = new google.maps.latlng(coors[1], coors[0]);     var marker = new google.maps.marker({         position: latlong,         map: map         //icon: getcircle(earthquake.properties.mag)     });    }  }   function getcircle(magnitude) {   return {     path: google.maps.symbolpath.circle,     fillcolor: 'red',     fillopacity: .2,     scale: math.pow(2, magnitude) / math.pi,     strokecolor: 'white',     strokeweight: .5   };  } 

what's mistake i'm doing in above code, please let me know..

"maps.html" not work because of multiple synchronicity issues.

  1. load maps.js beforehttp://maps.googleapis.com/maps/api/js initialise defined,
  2. load http://maps.googleapis.com/maps/api/jsand after html has been parsed mapdisplay element exists when initialise called.
  3. call addmarkers eqfeed_callback not initialise dataresults has been set valid object data.

most of have been found out opening developers console , checking errors when viewing "maps.html" in desktop browser. may research other questions on topic and/or check api documentation working examples - , notice how api documentation uses defer , async attributes on script tag make sure doesn't execute until after page has been parsed.


Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -