1. #1
    Sencha User
    Join Date
    Oct 2012
    Location
    Badalona-Barcelona
    Posts
    6
    Vote Rating
    0
    IbarCarty is on a distinguished road

      0  

    Default How to add Markers with buttons in Sencha Touch 2.0

    How to add Markers with buttons in Sencha Touch 2.0


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default map: map

    map: map


    There is something wrong with this bit:

    Code:
    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

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Location
    Badalona-Barcelona
    Posts
    6
    Vote Rating
    0
    IbarCarty is on a distinguished road

      0  

    Default


    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!

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Location
    Badalona-Barcelona
    Posts
    6
    Vote Rating
    0
    IbarCarty is on a distinguished road

      0  

    Default


    I have read all the Google Maps API and I always get to the conclusion that I have to use this code:
    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:
    Code:
    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!

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Google

    Google


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

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

    i just googled:

    drop markers sencha touch

    :-)