How to add Markers with buttons in Sencha Touch 2.0

[IbarCarty]

Hi, I'm trying to do an application with Sencha Touch 2. I have a different javascripts all doing a function.
My first .js is the custom view named MyView.js as follows:

Ext.define('KSDSSENCHA.view.MyView', {
extend: 'Ext.Panel',
//extend: 'Ext.Container',
xtype: 'myview',
scrollable: 'horizontal',
config: {
title: 'Rutas',
iconCls: 'maps',
scrollable: 'horizontal',
},
constructor: function() {
var me=this;
me.callParent(arguments);
var myTopBar=Ext.create('Ext.Toolbar', {
docked: 'top',
title: '........'
});
var myToolbar=Ext.create('Ext.Toolbar', {
docked: 'top',
scrollable: 'horizontal',
});
var myButton=Ext.create('Ext.Button', {
text: 'Home',
iconMask: 'true',
iconCls: 'home',
id: 'miBoton'
});
var myButton2=Ext.create('Ext.Button', {
text: '.......',
iconMask: 'true',
iconCls: 'delete',
id: 'miBotonMusic'
});
var myButton3=Ext.create('Ext.Button', {
text: '.....',
iconMask: 'true',
iconCls: 'action',
id: 'miBotonTiempo'
});
myToolbar.add([myButton, myButton2, myButton3]);
me.add([myTopBar, myToolbar]);
}
});

My second custom view is Localizacion.js as follows:



Ext.define('KSDSSENCHA.view.Localizacion', {
extend: 'Ext.Panel',
//extend: 'Ext.Container',
xtype: 'mylocalizacion',
requires: [
'Ext.device.Geolocation',
'Ext.device.Notification',
'Ext.Map',
'Ext.TitleBar',
'Ext.tab.Bar',
'Ext.SegmentedButton'
],
config: {
title: '......',
iconCls: 'star',
layout: 'fit',//pone el mapa
draggable: true,
useCurrentLocation: true
},
constructor: function() {
var me=this;
me.callParent(arguments);
var UAB= new google.maps.LatLng(41.500293,2.112582);
var myTopBar=Ext.create('Ext.Toolbar', {
docked: 'top',
title: '......'
});
var myToolbar=Ext.create('Ext.Toolbar', {
docked: 'top',
scrollable: 'horizontal'
});
var myButton=Ext.create('Ext.Button', {
text: 'Start Track',
iconMask: 'true',
iconCls: 'action',
id: 'miTrack',
action: 'watch'
});
var myButton2=Ext.create('Ext.Button', {
text: 'Mark',
iconMask: 'true',
iconCls: 'locate',
id: 'miMark'
});
var myButton3=Ext.create('Ext.Button', {
text: 'Actual Position',
iconMask: 'true',
iconCls: 'refresh',
id: 'miRefresh',
action: 'refresh'
});
var myMap=Ext.create('Ext.Map', {

mapOptions: {
center: UAB,
zoom: 3,
mapTypeId: google.maps.MapTypeId.HYBRID,
},
id: 'mapa'
});
myToolbar.add([myButton, myButton2, myButton3]);
me.add([myTopBar, myToolbar, myMap]);
}
});

My third view is the main one Main.js as follows:


Ext.define('KSDSSENCHA.view.Main', {
extend:'Ext.tab.Panel',
//extend: 'Ext.Container',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
scrollable: 'horizontal',
layout: {
type: 'card'
},
items: [
{
xtype: 'myview'
},
{
xtype: 'mylocalizacion'
}


]
}
});

My custom controller is Main.js as follows:


Ext.define('KSDSSENCHA.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
miBoton: '#miBoton',
miTrack: '#miTrack',
miMark: '#miMark',
miRefresh: '#miRefresh',
},
control: {
miBoton: {
tap: 'mostrarAlerta'
},
miTrack: {
toggle: 'watchToggle'
},
miMark: {
tap: 'mostrarMarker'
},
'button[action=refresh]': /*Podría poner también miRefresh*/{
tap: 'refresh'
},
}
},
mostrarAlerta: function(){
Ext.Msg.alert('Volviendo a Inicio!');
},
mostrarMarker: function(map){
Ext.Msg.alert('Destino fijado en Marker!');
var pos= new google.maps.LatLng(41.500293,2.112582);
var marker= new google.maps.Marker({
position: pos,
map: map,
visible: true,
icon: 'darkgreen_MarkerL.png',
animation: google.maps.Animation.BOUNCE
});
}
});

And the main javascript is App.js as follows:


Ext.application({
name: 'KSDSSENCHA',


requires: [
'Ext.MessageBox'
],


views: ['Main', 'MyView', 'Localizacion'],
controllers: ['Main'],


icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},


isIconPrecomposed: true,


startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},


launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();


// Initialize the main view
Ext.Viewport.add(Ext.create('KSDSSENCHA.view.Main'));
},


onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});

This is my full application. I have just started with Sencha Touch 2.0 and probably I have several mistakes, I'm sorry.
I want to make a small tracking of a route and I can't make it go, with the buttons of the second view "Localizacion.js". First of all I want to click on the first button "Start Track" and make a marker in my position and update it every few seconds with a new marker, but leaving the marker I did before and joining both markers with a line (as a route).
The second thing I want to to is with the second button "Mark", when I click on this button I want to insert a marker in a point (just one).
The third thing I want to do is with the third button "Actual Position", when I click on this button I want to update to my actual position.
This is all I want to do in my starting small application.
I just wanted to know how to put a marker in the google map just by clicking a button. As I've been trying to put in the "Mark" button on the controller Main.js. Resuming...
The question: ¿How to put a marker on a google map definde place by clicking on a button?

It would be great if I had an answer, Thanks.

[mitchellsimoens]

First, you need to use the BBCode CODE tags when you post code so that your code is legible.

To add a marker to a map, you need to look at how to do it via the google maps api.

[digeridoopoo]

There is something wrong with this bit:

Ext.Msg.alert('Destino fijado en Marker!');
var pos= new google.maps.LatLng(41.500293,2.112582);
var marker= new google.maps.Marker({
    position: pos,
    map: map,
    visible: true,
    icon: 'darkgreen_MarkerL.png',
    animation: google.maps.Animation.BOUNCE
});

Can't find variable 'map'

I am curious, why is a lot of your code written in the constructor function? I have never used the constructor function in my apps (I'm not saying this is incorrect, I've just never used it!)

Thanks

[IbarCarty]

Thanks for the answers. I'm a beginner in this area of programming. I'm just finishing Telecommunications Engineer (Spain) and we have never done Javascript on the career. I've started with the constructor function just to show the view of the app. I define variables as toolbars, buttons, map, etc. inside the constructor function and then I call the "add" function to insert all things inside the view. Seems a lot of code but it's just a few variables. I'm sure is not the best way to do it but I started with all this a few weeks ago. Just wanted to know how to do a small application that saved my mountain bike route with markers on a map.
Which way would you do the constructor function? As they all say... The more you learn the better!!
Thanks a lot for your answer!

[IbarCarty]

I have read all the Google Maps API and I always get to the conclusion that I have to use this code:

var pos= new google.maps.LatLng(41.500293,2.112582);		var marker= new google.maps.Marker({
			map: myMap,
			position: pos,
			visible: true,
			icon: 'darkgreen_MarkerL.png'
		});

In order to insert a marker in the map. I have already initialized the map in the view as:

var myMap=Ext.create('Ext.Map', {			mapOptions: {
				center: UAB,
				zoom: 3,
				mapTypeId: google.maps.MapTypeId.HYBRID
                                }
			id: 'mapa'
		});

But no markers are displayed on the map. Any additional help? Thanks a lot!

[digeridoopoo]

A bit of Googling brings up this example which may help:

http://sailei1.iteye.com/blog/1585225

i just googled:

drop markers sencha touch

:-)