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

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: [
config: {
title: 'map',
iconCls: 'maps',
xtype: 'map',
useCurrentLocation: false,
getLocation: false,
id : 'googlemap',

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.

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.

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