javascript - How Can I Get marker on current location in map in Sencha-Touch2.0

Question

Hey friends i m new to Sencha Touch platform.

And I want to find user current location with marker please help me out. i stuck in this condition.

Is there any new good tutorial for me then please share with me..

Thanks in Advance for your time.

Ravi Patel

Answer 1

Nice question. I faced a similar problem before. But, later, I figured out the solution.

Here's how you can solve it.

• Either use Phonegap's Geolocation API or ..
• Use Ext.util.Geolocation from Sencha Touch API

Demo with Phonegap's Geolocation API

1. Get the geolocation via the geolocation api.

   vat lat, lng;
   var geoLocationOptions = { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };
   navigator.geolocation.getCurrentPosition(geoLocationSuccess,geoLocationError,geoLocationOptions);
   
   function geoLocationSuccess(position) {
       lat = position.coords.latitude;
       lng = position.coords.longitude;
       Ext.Msg.alert("Geolocation","Latitude:"+ lat +", Longitude:"+ lng); 
   }
   
   function geoLocationError() {
      Ext.Msg.alert('Error','Error while getting geolocation');
   }
   

2. Then use the values of lat and lng to set the map's center to it as well as set the marker's position to that value.

    ... 
    ...
    var position = new google.maps.LatLng(lat,lng);
    map = this.add({
           xtype: 'map',
           getLocation: true,
           autoLoad: true,
           mapOptions: {
               zoom: 15,
               center: position,
               mapTypeId: google.maps.MapTypeId.ROADMAP,
               navigationControl: true,
               zoomControl: true,
               mapTypeControl: true,
               scrollwheel: true,
               scaleControl: true,
               zoomControlOptions: {
                   style: google.maps.ZoomControlStyle.LARGE
               }
           }
       });
   
    marker = new google.maps.Marker({
           id: 'geoLocMarker',
           position: position,
           map: map.getMap(),
           visible: true
    });
    ...
    ...