PDA

View Full Version : For these who failed to access google maps from controller.



delbin
31 Jul 2013, 2:02 PM
I had to google a lot to figure out a way to access and control google maps in a view from controller. Here is how i achieved this..

My map view:


Ext.define('MyApp.view.mymap', {
extend: 'Ext.Map',
alias: 'widget.mymap',
xtype: 'mymap',
requires: [
'Ext.TitleBar',
'Ext.util.GeoLocation',
],
config: {
title: 'map',
iconCls: 'maps',
xtype: 'map',
useCurrentLocation: false,
getLocation: false,
id : 'googlemap',

mapOptions:{
zoom: 9,
center: new google.maps.LatLng(10.5167, 76.2167),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
zoomControl : false,
panControl : false,
rotateControl : false,
streetViewControl : false,
mapTypeControl : false,
},
listeners: {
maprender : function(comp, map){
//this is where we get the map from view.
var thisMap=this.getMap();
// and then we pass the map to controller as function argument.
MyApp.app.getController('mapControl').mapController(thisMap);
},
}
},
});



And my controller function:


mapController: function(googlemap) {
//adding a marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(10.5167, 76.2167),
title : 'testing',
map: googlemap,
animation: google.maps.Animation.BOUNCE,
});
// you will find a marker at LatLng(10.5167, 76.2167)


//setting the center of map, in this case: LatLng(20.5167, 46.2167)
googlemap.setCenter(new google.maps.LatLng(20.5167, 46.2167));
}



Hope this helps someone.

fmoseley
2 Aug 2013, 7:18 AM
Thanks for sharing your solution.