asked on

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

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

leakim971

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

mSprout

ASKER

So what is:

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

Is that just a backup location?

leakim971

it center the map with this line 18 :

center: latlng,

mSprout

ASKER

But I want it to center on the user's location, so what do I change that to?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mSprout

ASKER

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?

Rob

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.