View Full Version : Render Google Map from List item tap - Porting to ST 2.0

1 Aug 2012, 6:18 AM

I've been porting an app to ST 2.0 and I'm wondering if I'm handling the rendering of my Google maps correctly. In 2.0 I'm doing it in my Main controller like this:

Ext.define('App.controller.Main', {
extend: 'Ext.app.Controller',
requires: [

config: {
refs: {
mainView: '#mainview',
imageList: '#imagelist'

control: {

imageList: {
itemtap: 'onImgListItemTap'

history: null

init: function() {

onImgListItemTap: function(dataview, index, target, record, e, options) {
var data = record.data;
var pos = new google.maps.LatLng(data.lat, data.long);
var zoomlevel = data.zoom;
var imgTiles = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return data.url
tileSize: new google.maps.Size(256, 256),
isPng: true,
opacity: 1.0

var mapView = Ext.create('Ext.Map', {
mapOptions : {
center : pos,
zoom : zoomlevel,
tilt: 0,
mapTypeId : google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT,
style: google.maps.ZoomControlStyle.SMALL
streetViewControl: false,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
listeners: {
delay: 500,
maprender: function(comp, map){
map.overlayMapTypes.insertAt(0, imgTiles);

var mapPanel = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'fit',
items: [{
xtype: 'titlebar',
docked: 'top',
title: 'Map',
items: [{
xtype: 'button',
text: 'Back',
ui: 'back',
handler: function () {
Ext.Viewport.setActiveItem(0, {type: 'slide', direction: 'right'});

Ext.Viewport.animateActiveItem(mapPanel, {type: 'slide', direction: 'left'})

This seems to work ok (no errors). But I'm just wondering is this proper or there is a more efficient way to create Google Maps with overlays (images or markers) following a list item tap.

Thanks in advance for any suggestions.

3 Aug 2012, 5:21 AM
Looks fine to me.

3 Aug 2012, 5:27 AM
Thanks for taking a look. I appreciate the sanity check!

3 Aug 2012, 12:20 PM
Actually taking a closer look this only works with Google Maps API version 3.7. If I specify any version greater (3.8 or 3.9) the map renders partially in the lower right corner which looks like an error where a layout is not set correctly.

I'm using:
fullscreen: true
layout: 'fit'

And it works great in 3.7.

Has anyone else seen this?

3 Aug 2012, 5:10 PM
Scratch that..It just started working. I was experimenting building with Sencha Command and was having a bit of trouble since the Google API is a remote source. After that the maps stopped working for some odd reason.

Moving the files to a clean directory seems to have fixed it.