Solved

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

Posted on 2013-11-17
8
2,162 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Once again I push the limits of my phone.  An introduction to the Android Google Now Launcher.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

863 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

28 Experts available now in Live!

Get 1:1 Help Now