Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Adding gmaps to extjs app
<html manifest="" lang="en-US">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<script type="text/javascript" src="[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>
addGmap: function (googlemapcontainer, viewModel) {
var mapcontainer = googlemapcontainer.down('#mapcontainer');
// remove old map
if(mapcontainer) {
// 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: {, 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'
showMap : function() {
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);
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
You can’t perform that action at this time.