rattanchauhan/ViewController1.js

## index.html
<!DOCTYPE HTML>

<html manifest="" lang="en-US">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>ApplicationName</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[yourApiKeyGoesHere]"></script>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
</body>
</html>

## ViewController1.js
addGmap: function (googlemapcontainer, viewModel) {
	var mapcontainer = googlemapcontainer.down('#mapcontainer');
	googlemapcontainer.setHidden(true);

	// remove old map
	if(mapcontainer) {
	    mapcontainer.destroy();
	}

	// create new map
	mapcontainer = Ext.create({
	    xtype: 'container',
	    height: 350,
	    itemId : 'mapcontainer',
	    listeners: {
	        'afterrender': {
	            fn: function() {
	                var mapId = googlemapcontainer.down('#mapcontainer').id;
	                var myLatLng = {
	                    lat: Number(viewModel.get('response').latitude),
	                    lng: Number(viewModel.get('response').longitude)
	                };
	                // map
	                var map = new google.maps.Map(document.getElementById(mapId), {
	                    center: {lat:myLatLng.lat, lng: myLatLng.lng},
	                    scrollwheel: false,
	                    zoom: 15,
	                    panControl: false,
	                    zoomControl: true,
	                    mapTypeControl: true,
	                    scaleControl: true,
	                    streetViewControl: false,
	                    overviewMapControl: false,
	                    mapTypeId: google.maps.MapTypeId.ROADMAP
	                });
	                // marker
	                var marker = new google.maps.Marker({
	                    map: map,
	                    position: myLatLng,
	                    title: 'Most Recent Location'
	                });
	            }
	        }
	    }
	});
	googlemapcontainer.add(mapcontainer);
}

## ViewController2,js
showMap : function() {
    Ext.Ajax.request({
    url: 'urlOfApiForCoordinates',
    failure: function(response, operation) {
        Ext.MessageBox.alert('Error', 'An error occurred while getting coordinates. Please try again later!');
    },
    success: function(response, operation) {
        viewModel.set('response', response);
        googlemapcontainer.setHidden(false);
                }
    });
}

## ViewModel.js
response : {
	latitude : 33.7,
	longitude: 44.4
}
	<!DOCTYPE HTML>

	<html manifest="" lang="en-US">
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="UTF-8">
	<title>ApplicationName</title>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[yourApiKeyGoesHere]"></script>
	<!-- The line below must be kept intact for Sencha Command to build your application -->
	<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
	</head>
	<body>
	</body>
	</html>
	addGmap: function (googlemapcontainer, viewModel) {
	var mapcontainer = googlemapcontainer.down('#mapcontainer');
	googlemapcontainer.setHidden(true);

	// remove old map
	if(mapcontainer) {
	mapcontainer.destroy();
	}

	// create new map
	mapcontainer = Ext.create({
	xtype: 'container',
	height: 350,
	itemId : 'mapcontainer',
	listeners: {
	'afterrender': {
	fn: function() {
	var mapId = googlemapcontainer.down('#mapcontainer').id;
	var myLatLng = {
	lat: Number(viewModel.get('response').latitude),
	lng: Number(viewModel.get('response').longitude)
	};
	// map
	var map = new google.maps.Map(document.getElementById(mapId), {
	center: {lat:myLatLng.lat, lng: myLatLng.lng},
	scrollwheel: false,
	zoom: 15,
	panControl: false,
	zoomControl: true,
	mapTypeControl: true,
	scaleControl: true,
	streetViewControl: false,
	overviewMapControl: false,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	});
	// marker
	var marker = new google.maps.Marker({
	map: map,
	position: myLatLng,
	title: 'Most Recent Location'
	});
	}
	}
	}
	});
	googlemapcontainer.add(mapcontainer);
	}
	showMap : function() {
	Ext.Ajax.request({
	url: 'urlOfApiForCoordinates',
	failure: function(response, operation) {
	Ext.MessageBox.alert('Error', 'An error occurred while getting coordinates. Please try again later!');
	},
	success: function(response, operation) {
	viewModel.set('response', response);
	googlemapcontainer.setHidden(false);
	}
	});
	}