PDA

View Full Version : Map tab problem using TabPanel



alawibh
19 Dec 2011, 6:07 AM
Dears,

I'm trying to create TabPanel with more than Tabs, one of them hold Google Map.

The problem is as follows:

1- When I lunch the application and the Map Tab is active by default, the Map appears correctly, but I'm not able to use Map controls (Activate Satellite, Zoom In or Zoom Out).

- Look at the attached snapshot: ActiveFirst.jpg
- Find the HTML file for the demo in: MapProb\MapActiveFirst.htm
- Find the JavaScript code for that demo in: MapProb\JS\MainApp.js
- Watch this video for problem using Mobile Browser: http://www.youtube.com/watch?v=w21MajanGng

2- When I lunch the application and the Map Tab is NOT active by default, the Map DOSE NOT appears correctly, it appears in the top left corner, but also I'm not able to use Map controls (Activate Satellite, Zoom In or Zoom Out).

- Look at the attached snapshot: NotActiveFirst.jpg
- Fing HTML file for the demo in: MapProb\MapNotActiveFirst.htm
- Find the JavaScript code for that demo: MapProb\JS\YourCode.js
- Watch this video for the problem from Mobile Browser: http://www.youtube.com/watch?v=8Y7Y8Sb5NlA

Demo application:

Click to download - http://www.2shared.com/file/R85drBj0/MapProb.html

I want the following:

A. What is the problem with the Map Control in both cases?
B. Why Map showed in the corner and not appear as full screen when Map Tab not activated by default?
C. I want tutorial for Google Maps to be used for Mobile Web Development, is it available?

Regards,

mitchellsimoens
19 Dec 2011, 7:31 AM
Just tried this simple test case on PR3 as I know there was problems in PR2 and it works:


Ext.create('Ext.tab.Panel', {
fullscreen : true,
items : [
{
xtype : 'map',
title : 'Map 1'
},
{
xtype : 'map',
title : 'Map 2'
}
]
});

alawibh
19 Dec 2011, 11:09 PM
Dear Mitchellsimoens,

I downloaded PR3, but when I replace sencha-touch-all.js with the old one this error appear:


NOT_FOUND_ERR: DOM Exception 8: An attempt was made to reference a Node in a context where it does not exist.

This the code after this update:

http://www.2shared.com/file/0q-oEhC3/MapProb.html
(http://www.2shared.com/file/0q-oEhC3/MapProb.html)
What is the problem?

Regards,

mitchellsimoens
20 Dec 2011, 3:36 AM
What is the problem?

I don't know, I don't have any code from you and I don't follow links.

alawibh
20 Dec 2011, 3:42 AM
So, What are the alternatives for NOT following the links?
How you can provide me with support?

Regards,

mitchellsimoens
20 Dec 2011, 3:57 AM
So, What are the alternatives for NOT following the links?
How you can provide me with support?

Regards,

Post code snippets here, enough for me to understand.

alawibh
20 Dec 2011, 4:15 AM
This is the code:



var MyClientInfo;
var tabpanel;
var mapdemo;


function UpdateLatesActions(res)
{
var MyLogs = res.value;
var MyHTML = "Test Add HTML";
document.getElementById("TblContainer").innerHTML = MyHTML;
}


function initialize() {
var position = new google.maps.LatLng(26.23122,50.51097);
var marker = new google.maps.Marker({
position: position,
title : 'Sencha HQ'
});
mapdemo.map.panTo(position);
//marker.setMap(mapdemo);
//mapdemo.maps.addOverlay(marker);
}


Ext.application({
name: 'MyApp',
launch: function() {


var position = new google.maps.LatLng(37.44885,-122.158592);
infowindow = new google.maps.InfoWindow({
content: 'Sencha Touch HQ'
});

mapdemo = new Ext.Map({
mapOptions : {
center : new google.maps.LatLng(37.381592, -122.135672), //nearby San Fran
zoom : 12,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},


listeners : {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: position,
title : 'Sencha HQ',
map: map
});


google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
setTimeout( function(){ map.panTo (position); } , 1000);
}
}
});

tabpanel = Ext.create("Ext.tab.Panel", {
xtype:'tabpanel',
id: 'tabpanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'MyHome',
scroll: 'vertical',
html: [ "My HTML 1" ],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
// function
}
}
]
}]
},
{
xtype: 'list',
title: 'Snapshot',
iconCls: 'Snapshot',
itemTpl: "<b>{title}:</b> {desc}",
store: {
fields: ['title', 'desc'],
data: [
{title: 'Name', desc: "Sencha Name"},
{title: 'Email', desc: "Sencha Email"},
{title: 'Mobile 1', desc: "Sencha Mobile 1"},
{title: 'Mobile 2', desc: "Sencha Mobile 2"}
]
}
},
{
title: 'History',
iconCls: 'History',
html: [ "My HTML 2" ].join("")
},
{
id: 'ViolationsTab',
title: 'Violations',
iconCls: 'Violations',
scroll: 'vertical',
badgeText: "5",
html: [ "<div id='TblContainerV'>My HTML 3</div>" ],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
//Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
}
}
]
}]
},
{
title: 'Map',
iconCls: 'Map',
layout: 'fit',

items: [mapdemo],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
//Ext.Msg.alert('Alert', 'Violations Refresh', Ext.emptyFn);
//initialize();
}
}
]
}]
}
]
}).setActiveItem(0);
}


});


It was working fine before upgrade code to PR3.

mitchellsimoens
20 Dec 2011, 4:51 AM
Biggest problem is you have the html config specified as an Array of a single String. html doesn't accept an Array so making it just be a string allowed this code to render.
dockedItems are deprecated, they should be housed in the items array.
Once I made the first change, things rendered and your map filled the entire height and width of that tab in PR3.

alawibh
20 Dec 2011, 5:00 AM
I'm sorry but I didn't understand this:


Biggest problem is you have the html config specified as an Array of a single String. html doesn't accept an Array so making it just be a string allowed this code to render

What do you mean? Example? Link?

mitchellsimoens
20 Dec 2011, 5:03 AM
From your code:


{
title: 'Home',
iconCls: 'MyHome',
scroll: 'vertical',
html: [ "My HTML 1" ],
dockedItems: [{
xtype: "toolbar",
docked: 'top',
items: [
{
xtype: "spacer",
},
{
xtype: "button",
text: "Refresh",
handler: function () {
// function
}
}
]
}]
},

The red text above is not valid. It should be:


html: "My HTML 1",

kinestetic
23 Jan 2012, 9:20 PM
alawibh, i can answer on your 1st question. As i saw, you launched your app on android. Google Android does not support controls, pinch, etc within Google Maps api v3. You can test it simply: http://maps.google.com. You should create your own controls, using google maps api.
About your 2nd problem. I've had the same problem. This works fo me:


/*activeitemchange event handler*/

function(view,item){
if (item.xtype=='map'){
/*Hook to preserve map from collapse ^-^*/
try{
google.maps.event.trigger(item.getMap(),'resize');
}
catch(e){}
}
}

alawibh
24 Jan 2012, 3:10 AM
Hi dear,

Thanks a lot for your reply and help.
Would you mind if you look at this problem for me:

http://www.sencha.com/forum/showthread.php?176312-How-to-get-Google-Map-instance
(http://www.sencha.com/forum/showthread.php?176312-How-to-get-Google-Map-instance)

toddsantoro
3 Feb 2012, 7:35 AM
The map only wants to show up in a small square in the upper left hand of the screen. I placed this code on my initial loading screen and it filled the whole screen correctly. Below is my code:

/**
* location.js
*/
app.views.Location = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'fit',
name: 'Location',
position:3,
items: [{
xtype: 'map',
fullscreen: true,
useCurrentLocation: true,
mapOptions: {
zoom: 12
}
}],
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Location'
}],
initComponent: function() {
Logger.log(this.name, 'Init Component');
// apply
app.views.Home.superclass.initComponent.apply(this, arguments);
Logger.log(this.name, 'Init Component Complete');
},
handleTo:function() {
Logger.log(this.name, "Handle To");
},
handleFrom:function() {
Logger.log(this.name, "Handle From");
}
});