CODEWITHSUNDEEP
extjs
Pravin
Pravin

Reputation: 6662

Sencha touch 2 - Display current location on map

I want to display my current location and get location coordinates to search nearby. Starting with the code below to display my location on the map, but its not working.

{
  xtype: 'map',
  useCurrentLocation: true
}

Upvotes: 2

Views: 10240

Answers (4)

Gaurav
Gaurav

Reputation: 413

Here is the code to show location current location

var geo = Ext.create('Ext.util.Geolocation', {
 autoUpdate: false,
 listeners: {
  locationupdate: function(geo) {
     var currentLat = geo.getLatitude();
     var currentLng =  geo.getLongitude();
     var altitude = geo.getAltitude();
     var speed = geo.getSpeed();
     var heading= geo.getHeading();
  },
  locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
     if(bTimeout)
       Ext.Msg.alert('Timeout occurred',"Could not get current position");
     else 
       alert('Error occurred.');
     }
  }
 }
});
geo.updateLocation();

Upvotes: 0

adis
adis

Reputation: 5951

I think this is a bug in ST2. I asked (I think you did :-) ) this question also in Sencha Forums: http://www.sencha.com/forum/showthread.php?156501-Maps-with-sencha-touch

My code in that forum did not worked. The code that I was using is as follows:

The index.html file looks like this:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample app</title>

    <script type="text/javascript" src="lib/touch/sencha-touch-all-debug.js"></script>
    <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

    <script type="text/javascript">
        Ext.Loader.setConfig({
            enabled : true,
            path    : {
                PPL : 'ppl.js'
            }
        });

        Ext.setup({
            tabletStartupScreen : 'tablet_startup.png',
            phoneStartupScreen  : 'phone_startup.png',
            icon                : 'phone_startup.png',
            onReady             : function() {
                Ext.create('PPL.App', {
                    fullscreen : true
                });
            }
        })
    </script>
</head>
<body>
</body>
</html>

And my ppl.js looks like this:

Ext.define('PPL.App', {
    extend: 'Ext.Panel',
    layout: 'vbox',

    config: {
        items: [{
            xtype: 'toolbar',
            title: 'Sample MAP'
        }, {
            xtype: 'panel',
            layout: 'fit',
            items: [{
                xtype: 'map',
                useCurrentLocation: true
            }]
        }]
    }
});

If I change my ppl.js into the following:

Ext.define('PPL.App', {
    extend: 'Ext.Map',
    layout: 'fit',
    config: {
        items: [{
            xtype: 'map',
            useCurrentLocation: false
        }]
    }
});

Then it is working! So, I think we need to wait untill next release, in the mean time learn ST2 :-)

Cheers!

Upvotes: 3

Kenny Meyer
Kenny Meyer

Reputation: 8027

I defined a custom map class:

Ext.define("FindMyMoney.view.MapView", {
    extend: "Ext.Map",
    xtype: 'mapview',
    config: {
        useCurrentLocation: true,
        listeners: {
            maprender : function(comp, map){
                new google.maps.Marker({
                    position: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude()),
                    map: map
                });
            }
        }
    }
});

So it would render a marker on my current position. Simple.

Upvotes: 7

Deepanshu Shukla
Deepanshu Shukla

Reputation: 133

Here is the code. It will show multiple markers with bounds:

Ext.define("iME.view.Maps", {
    extend: "Ext.Map",
    xtype: 'mapview',
    config: {

        mapOptions: {    
            center: new google.maps.LatLng(28.80010128657071, 77.28747820854187),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false
        },

        listeners: {
            maprender: function (comp, map) {

                var markersll = [
                    ['Noida', 28.80010128657071, 77.28747820854187],
                    ['Coogee Beach', 24.80010128565, 73.2874782084457],
                    ['Cronulla Beach', 25.80010128657071, 76.28747820854187],
                    ['Manly Beach', 28.80010128657071, 72.28747820854187],
                    ['Maroubra Beach', 9.052234, 75.243685]
                ];

                var infowindow = new google.maps.InfoWindow();
                var marker, i, pos;
                var bounds = new google.maps.LatLngBounds();
                for (i = 0; i < markersll.length; i++) {

                    pos = new google.maps.LatLng(markersll[i][1], markersll[i][2]);
                    bounds.extend(pos);
                    marker = new google.maps.Marker({

                        position: pos,
                        animation: google.maps.Animation.BOUNCE,
                        icon: 'http://thumb10.shutterstock.com/thumb_small/429058/131292377/stock-vector-map-super-marker-icon-131292377.jpg',
                        map: map,
                        title: 'Click Me ' + i
                    });    

                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(markersll[i][0]);
                            infowindow.open(map, marker);
                        }
                    })(marker, i));
                    map.fitBounds(bounds);
                }
            }
        }
    }    
});

Upvotes: 5

Related Questions