Not able to see google map in intel xdk using Google Map API JS

Question

This is my first Google Map API project, and I am creating a transport app but unfortunately it does not work, earlier it was working but now it is only working in browser not on mobile and emulator.

In emulator it only shows Google logo and Terms Link.

I am using this reference google link

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MYKEY&libraries=places"></script>

my JS CODE : (mapwork.js)

function currentpostionmap()
{
     if ( navigator.geolocation ) {


        function success(pos) 
         {
             var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
             var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
          var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
             var bounds = new google.maps.LatLngBounds();
        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image123
        
        });
              bounds.extend(latlng);
                    map.fitBounds(bounds);
//            
                    multimarker(map);
//               

        }
        function fail(error) {
           var latlng = new google.maps.LatLng(18.5204, 73.8567);
             var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
      
            marker = new google.maps.Marker({
            position: latlng,
            map: map
           
            });


        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
    } 
}
function multimarker(map)
{
          jQuery.ajax({                              
    url: baseurl +  "getdriverlocation.php",

    async: true,
    success: function(data){
       var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data)

        jQuery(myArray).each(function( index, element ) {     
        driverlat = element.driver_lat;
        driverlng = element.driver_lng;
        locations.push([driverlat , driverlng])
});



 for (i  = 0; i < locations.length; i++)
                 { 
                var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);

            drivermarker=new google.maps.Marker({position:latlng1});
            drivermarker.setMap(map);

           google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
            return function() {

            //DRIVER CLICK EVENT
        }
      })(drivermarker, i));



                 }


} 

});

}
 function watchDriverPosition(userid)
{
    function success(pos)
    {
         window.setInterval(function(){
          saveDriverLocation(pos.coords.latitude, pos.coords.longitude,userid);
        }, 50000);
    }
    function fail()
    {
        alert ('Fail to watch drivers Position');
    }
    watchId = navigator.geolocation.watchPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});

}
function saveDriverLocation(latc,lngc,userid)
{

     jQuery.ajax({
url: baseurl + "postdriverlocation.php",
data:'latitude='+latc +'&longitude='+lngc+'&login_id='+userid,
type: "POST",
success:function(response){
    response = $.trim(response);
    if (response == "false"){
       console.log(response);


  }else{
      console.log(response);
  }


},
error:function (){}
});
}

CALLING MAP FUNCTION HERE(main.js)

function showmap(usertype,userid)
    {
        if (usertype==1)
            {
                          changepage('#main');
                currentpostionmap();

            }
        else if (usertype==0)
            {

                watchDriverPosition(userid);

            }
        else{
            alert('You are not logged in.');
            changepage('#login');
        }
    }

It is working on Every browser but not on EMULATOR or MOBILE PHONE.

Please let me know why it is happening and provide a better solution

Thanks

Answer 1

Wrap your map code to

 $( document ).on( "pageshow", "#YOUR_MAP_PAGE", function() {

//your map code...

});