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.
- load
maps.js
beforehttp://maps.googleapis.com/maps/api/js
initialise
defined, - load
http://maps.googleapis.com/maps/api/js
and after html has been parsedmapdisplay
element exists wheninitialise
called. - call
addmarkers
eqfeed_callback
notinitialise
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
Post a Comment