Skip to content

Instantly share code, notes, and snippets.

@rattanchauhan
Last active November 14, 2016 13:23
Show Gist options
  • Save rattanchauhan/3617ef33777c73aaeb6295a28469fc9c to your computer and use it in GitHub Desktop.
Save rattanchauhan/3617ef33777c73aaeb6295a28469fc9c to your computer and use it in GitHub Desktop.
Adding gmaps to extjs app
<!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);
}
});
}
response : {
latitude : 33.7,
longitude: 44.4
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment