Ext.map markers are not loading in Sencha touch 2 - sencha-touch

Question

I use following code to add markers to map which is not showing me the marker in Ext.map
{
xtype: 'map',
id :'geomap',
width: '70%',
height: '100%',
layout: 'fit',
useCurrentLocation: false,
flex: 3,
mapOptions: {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl : false,
navigationControl : false,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
draggable: true,
keyboardShortcuts: false,
scrollwheel: true,
},
initialize: function() {
var gMap = this.getMap();
// drop map marker
var marker = new google.maps.Marker({
map: gMap,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng (12.82787,80.219722),
title:"Hello World!"
});
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
listeners: {
locationupdate: function (geo) {
var center = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
Ext.getCmp('geomap').update(center);
//To place the marker
var marker = new google.maps.Marker({
position: center,
map: Ext.getCmp('geomap').map
});
Ext.msg.alert('New latitude: ' + geo.getLatitude());
},
locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if (bTimeout) {
Ext.msg.alert('Timeout occurred.');
} else {
Ext.msg.alert('Error occurred.');
}
}
}
});
geo.updateLocation();
}
}
which is not showing markers . Please help .

Answer 1

The initialize method is not the appropriate place to play with the map because you can't be sure it has been rendered yet in there. You need to put your code in a maprender event handler.
Then, in order to find your first marker easily, you should initially center the map on it (like in this example).
Finally, you've got some small errors in your Geolocation handler's code. See my comments in the code.
Here's a fixed version of your code. For me, it works for both markers with Touch 2.2.1. I've not tested the Geolocation part, though, since it is not available in my browser...
{
xtype: 'map',
id :'geomap',
width: '70%',
height: '100%',
layout: 'fit',
useCurrentLocation: false,
flex: 3,
mapOptions: {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl : false,
navigationControl : false,
streetViewControl : false,
backgroundColor: 'transparent',
disableDoubleClickZoom: true,
draggable: true,
keyboardShortcuts: false,
scrollwheel: true
// Center your map to see your first marker ;)
,center: new google.maps.LatLng (12.82787,80.219722)
}
,listeners: {
maprender: function() {
// Get a ref to the google map object (should be provided
// as an argument to the listener but apparently there is
// a bug...)
var gMap = this.getMap();
new google.maps.Marker({
map: gMap,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng (12.82787,80.219722),
title:"Hello World!"
});
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: true,
listeners: {
locationupdate: function (geo) {
var center = new google.maps.LatLng(geo.getLatitude(), geo.getLongitude());
// This is deprecated
// Ext.getCmp('geomap').update(center);
Ext.getCmp('geomap').setMapCenter(center);
//To place the marker
var marker = new google.maps.Marker({
position: center,
// This won't work
// map: Ext.getCmp('geomap').map
//
// Use the ref we already have:
map: gMap
//
// Or you could get it this way:
// map: Ext.getCmp('geomap').getMap()
});
Ext.msg.alert('New latitude: ' + geo.getLatitude());
},
locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if (bTimeout) {
Ext.Msg.alert('Timeout occurred.');
} else {
Ext.Msg.alert('Error occurred.');
}
}
}
});
geo.updateLocation();
}
}
}