How to dynamically load scripts in jQuery Mobile -
i developing mobile application using jquery mobile running on top of phonegap. facing issue using google places api+jquery ui maps. problem need load google maps api script when loading particular page. seems scripts loaded @ first dom load in jquery mobile. issue have ask user turn on data on mobile because otherwise javascript error thrown jquery ui maps script.
is there way can dynamically load google maps api script when loading particular page in jquery mobile?
edit:
i have jquery ui maps related javascript files load well, complication arises. appreciate help..
edit: adding code example;
<div data-role="page" id="showinfopage" data-theme="a" data-close-btn="right"> <div data-role="header" data-theme="d"> <h1>information</h1> </div> <div data-role="content"> <h1 id="elementname"></h1> <h2 id="elementaddress"></h2> <a id="elementcallhos" data-role="button" class="tele" style="height:40px;"><span id="elementtele"></span></a> <a id="elementcallhos1" data-role="button" class="tele" style="height:40px;display:none;"><span id="elementtele1"></span></a> <a id="elementgooglemaps" data-role="button" class="googlemapsbtn" data-rel="page">google maps</a> </div> </div> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script> <script type="text/javascript" src="js/jquery.ui.map.js"></script> <script type="text/javascript" src="js/jquery.ui.map.services.js"></script> <script type="text/javascript" src="js/jquery.ui.map.extensions.js"></script> $( document ).on( "pageshow", "#nearesthotels", function() { checklocation("nearesthotelslist","showinfopage",['lodging']); } ); <script type="text/javascript"> var map; var infowindow; var lat; var lng; var lng; var service; var reference; var initiallocation; var nearestinfoarr = []; var ulid = null; var pgid = null; function checklocation(listviewid,pageid,typetosearch) { if (navigator.geolocation) { ulid = '#'+listviewid; pgid = '#'+pageid; navigator.geolocation.getcurrentposition(function(position) { initiallocation = new google.maps.latlng(position.coords.latitude, position.coords.longitude); lat = position.coords.latitude; lng = position.coords.longitude; callplaceservice(lat, lng,typetosearch); }, gpsfail, { enablehighaccuracy : true, maximumage : 300000 }); } } function callplaceservice(lat, lng,typetosearch) { $.mobile.showpageloadingmsg(); var pyrmont = new google.maps.latlng(lat, lng); var myoptions = { zoom : 15, center : pyrmont, maptypeid : google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); var request = { location : pyrmont, radius : 5000, types: typetosearch //keyword : 'bank' }; service = new google.maps.places.placesservice(map); service.search(request, callback); } function callback(results, status) { if (status == google.maps.places.placesservicestatus.ok) { ( var = 0; < results.length; i++) { var requestdetails = {reference : results[i].reference}; service.getdetails(requestdetails, checkdetailedstatus); } } $.mobile.hidepageloadingmsg(); } function checkdetailedstatus(details, detailstatus) { if (detailstatus == google.maps.places.placesservicestatus.ok) { $(ulid).append('<li><a href="'+pgid+'?id='+details.name+'&searchterm='+details.name+","+details.formatted_address+'&address='+details.formatted_address+'&tele='+details.formatted_phone_number+'">'+details.name+'</a></li>'); $(ulid).listview("refresh"); $(ulid).trigger( "updatelayout"); } } function gpsfail() { alert('failed retireve location'); }
i suggest move code load google maps api script function call specific page.
so instead of this:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=api_key&sensor=set_to_true_or_false"> </script> have this:
$.getscript("https://maps.googleapis.com/maps/api/js?key=api_key&sensor=set_to_true_or_false"); have @ following additional options:
Comments
Post a Comment