Solved

Need Help Getting a Location using GeoLocation for App Framework Mobile Application

Posted on 2013-11-17
8
2,135 Views
Last Modified: 2013-12-12
I have a very simple request that I have not been able to find anywhere. I need my app to show the users' current location on page load, and I want a marker marking the location. I found a few examples where there was a sample location included for testing, however, I have not been able to remove the hard coded latitude and longitude and still have a working product. Please see my example below

var tmrSplash;
    tmrSplash=setTimeout("document.getElementById('splash').style.display='none';document.getElementById('splash').style.top='1024px';",3000);

    var _map = null;
    var _seconds = 30;
	var _llbounds = null;

	var boolTripTrack=true;  //use this flag to continually update the GPS location and leave markers every 30 seconds

    function initialize()
    { }

    function drawMap()
    {
        var latlng = new google.maps.LatLng(currentLatitude,currentLongitude);
        var mapOptions = {
            zoom:10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.HYBRID,
			zoomControl: true,
            zoomControlOptions: {
              style: google.maps.ZoomControlStyle.SMALL,
			  position: google.maps.ControlPosition.LEFT_TOP
            },
        };

        if (boolTripTrack==true)
        {
            _map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        }
    }

    //40.7655,-73.97204 = NYC
    var currentLatitude = "40.713768";
    var currentLongitude = "-73.016696";
    var options = {
					 timeout: 10000,
					 maximumAge: 11000,
					 enableHighAccuracy: true
				  };

	var suc = function(p){
		console.log("geolocation success",4);

		if( _map == null ) {
			currentLatitude = p.coords.latitude;
			currentLongitude = p.coords.longitude;
			drawMap();
		}

	  	var myLatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
	  	var beachMarker = new google.maps.Marker({
		  position: myLatLng,
		  map: _map
		});

		if( _llbounds == null )
			_llbounds = new google.maps.LatLngBounds(new google.maps.LatLng(p.coords.latitude, p.coords.longitude));
		else
			_llbounds.extend(new google.maps.LatLng(p.coords.latitude, p.coords.longitude));
		_map.fitBounds(_llbounds);
	};

	var fail = function(){
		console.log("Geolocation failed. \nPlease enable GPS in Settings.",1);
	};

    var getLocation = function()
    {
        console.log("in getLocation",4);
    }

    function onDeviceReady()
    {
        try
        {
            if (intel.xdk.device.platform.indexOf("Android")!=-1)
            {
                intel.xdk.display.useViewport(480,480);
                document.getElementById("map_canvas").style.width="480px";
            }
            else if (intel.xdk.device.platform.indexOf("iOS")!=-1)
            {
                if (intel.xdk.device.model.indexOf("iPhone")!=-1 || intel.xdk.device.model.indexOf("iPod")!=-1)
                {
                    intel.xdk.display.useViewport(320,320);
                    document.getElementById("map_canvas").style.width="320px";
                }
                else if (intel.xdk.device.model.indexOf("iPad")!=-1)
                {
                    intel.xdk.display.useViewport(768,768);
                    document.getElementById("map_canvas").style.width="768px";
                }
            }
            
           if (intel.xdk.iswin8) {
                document.getElementById("map_canvas").style.width = screen.width + "px"
                document.getElementById("map_canvas").style.height = screen.height + "px";
            }

            
			if (intel.xdk.geolocation != null)
			{
				document.getElementById("map_canvas").style.height = screen.height + "px";
				intel.xdk.geolocation.watchPosition(suc,fail,options);
			}
        }
        catch(e)
        {
            alert(e.message);
        }

        try
        {
            //lock orientation
            intel.xdk.device.setRotateOrientation("portrait");
            intel.xdk.device.setAutoRotate(false);
        }
        catch(e) {}

        try
        {
            //manage power
            intel.xdk.device.managePower(true,false);
        }
        catch(e) {}
		
		try
		{
			//hide splash screen
			intel.xdk.device.hideSplashScreen();
        }
        catch(e) {}		
    }


    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);

Open in new window

0
Comment
Question by:mSprout
  • 3
  • 3
8 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39656141
Here the doc and examples :
https://developers.google.com/maps/articles/geolocation
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
containing this code :
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.

var map;

function initialize() {
  var mapOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);

Open in new window


so instead :
      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Location found using HTML5.'
      });

Open in new window

you want :
var beachMarker = new google.maps.Marker({
		  position: pos,
		  map: map
		});

Open in new window

0
 

Author Comment

by:mSprout
ID: 39657766
So what is:

//40.7655,-73.97204 = NYC
    var currentLatitude = "40.713768";
    var currentLongitude = "-73.016696";

Is that just a backup location?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39657832
it center the map with this line 18 :

center: latlng,
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:mSprout
ID: 39657837
But I want it to center on the user's location, so what do I change that to?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39657840
you mean the marker work fine?
0
 

Author Comment

by:mSprout
ID: 39657849
Yes, I believe the marker shows, I just think it is not in the right place. I am currently at work, so I don't have access to view the program. However, I do believe most of my code got reset by the program for some reason. Not sure. When I am making the app, should everything be in one html file? I think it failed possibly because I tried to add the navigation to a panel?
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 39715248
I've requested that this question be closed as follows:

Accepted answer: 500 points for leakim971's comment #a39656141

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Working settings for French ISP Orange "Prêt à Surfer" SIM cards for data connections only. Can't be found anywhere else !
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This video is in connection to the article "The case of a missing mobile phone (https://www.experts-exchange.com/articles/28474/The-Case-of-a-Missing-Mobile-Phone.html)". It will help one to understand clearly the steps to track a lost android phone.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now