1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    10
    Vote Rating
    0
    b0hne is on a distinguished road

      0  

    Default Adding Marker to Map inside Panel

    Adding Marker to Map inside Panel


    Hi,

    I have a function that should add some markers to a google map.
    The map is displayed inside a Panel and i don't know how to set the markers to the map.

    Code:
    Toolbar.views.Mapcard = Ext.extend(Ext.Panel, {    title: "Map",
        iconCls: "maps",
        styleHtmlContent: true,
        items: [
            {
                xtype: 'map',
                fullscreen: true
            }
        ],
        initComponent: function() {
            Ext.apply(this, {
                dockedItems: [{
                    xtype: "toolbar",
                    title: "Map"
                }]
            });
            Toolbar.views.Mapcard.superclass.initComponent.apply(this, arguments);
        }
    });
    Ext.reg('mapcard', Toolbar.views.Mapcard);
    I also tried the following: inside the initComponent:
    Code:
    this.mapview = new Ext.Map({                    
                        id: 'mapView',
                        title: 'Map',
                        mapOptions: {
                            zoom: 11
                        }
        
            });
            this.items = [this.mapview];

    and in my function, that is called by a store's load() event i want to set a marker but i cannot acces the map.
    Code:
    var shopmarker = new google.maps.Marker({                
                    map: // how do i get the map here ? ,
                    position: latLng,
                    icon: image,
                    shape: shape,
                    shadow: shadow
    });
    I've tried this: "map: mapView.map" (as it worked in a former app) but no markers are displayed.

    Thanks in advance!!

    Simon

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2011
    Location
    Dundas, Ontario, Canada
    Posts
    82
    Vote Rating
    -4
    rgporter can only hope to improve

      0  

    Default


    Assuming you have something like:

    Code:
    var MapPanel = new Ext.Map({
    ... <map stuff here> ...
    });
    to get a map going in Sencha Touch, you can then reference it in Google Maps API..

    Adding a marker goes as such:

    Code:
    var markers = {},
    locationArray = {};
    
    // populate your locationArray with locations...
    
    locationArray.each(function(record) {
    markers[id] = new google.maps.Marker({
    map: MapPanel.map,
    ... <marker stuff here> ...
    });
    });
    Hope that helps. I haven't built a map in a few months, but when I did it went like that.. basically the map: method wants from Sencha an Ext.Map var plus .map.

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    10
    Vote Rating
    0
    b0hne is on a distinguished road

      0  

    Default Adding Marker to Map inside Panel

    Adding Marker to Map inside Panel


    Thanks for your reply!

    The way you mentioned worked for me in my other app but now it doesn't...

    I've tried to work with MVC in this app so i think my function, which sets the markers to the map has to be in a controller. When i do a console.log(mapPanel); inside my "addMarker()" function i just get a "null" for the map object.

    So I thnk i just have to put the funtion into the controller, which has to be registered right ?

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    10
    Vote Rating
    0
    b0hne is on a distinguished road

      0  

    Default


    so i've figured out a solution for my problem.

    Code:
    Toolbar.views.Mapcard = Ext.extend(Ext.Panel, {
    ...
    ...
    initComponent: function(){
         Ext.apply(this, {            dockedItems: [{
                    xtype: "toolbar",
                    title: "Karte"
                }]
            });
    this.map = new Ext.Map ({
                useCurrentLocation: true,
                mapOptions: {
            zoom: 11,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },
                listeners: {
                    afterrender: function(map){
                        var geo = new Ext.util.GeoLocation({
                            accuracy: 1,
                            autoUpdate: true,
                            listeners: {
                                locationupdate: function(geo) {
                                    center = new google.maps.LatLng(geo.latitude, geo.longitude);
                                    zoom = 11;
                                    if(map.rendered){
                                        map.update(center);
                                    }else{
                                        map.on('activate', map.onUpdate, map, {single: true, data: center});
                                    }
                                }
                            }
                        });
                        geo.updateLocation();
                        
                        //set markers from store-data:
                        ListStore.each(function(store){
                                    
                                         var latLng = new google.maps.LatLng(this.data.lat, this.data.lng);
                                         var html='<b>' + this.data.name + '</b><br /><p>' + this.data.address + '</p>';
                                        var shopmarker = new google.maps.Marker({
                                            map: map.map,
                                            position: latLng
                                        });
                                        
                                        //use "mosedown" instead of click, otherwise it is not working on android
                                        google.maps.event.addListener(shopmarker, "mousedown", function() {
                                            storeBubble.setContent(html);
                                            storeBubble.open(map.map, shopmarker);
                                        });
                         });
                    }
    
    
                }
            });
            
                
                        
                    
            this.items = this.map;    
           
            Toolbar.views.Mapcard.superclass.initComponent.apply(this, arguments);
        }
    });

    This works quite well for me!

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    1
    Vote Rating
    0
    zooldk is on a distinguished road

      0  

    Default


    Hi b0hne,

    I am having the exact same problem.. having a Map inside a tabpanel.
    So I've tried to copy your example, but my tab panel with the Map inside shows now map, only blank page.
    Can you show the full example that works?

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    10
    Vote Rating
    0
    b0hne is on a distinguished road

      0  

    Default Adding Marker to Map inside Panel

    Adding Marker to Map inside Panel


    Hi!

    So what exactly do you need ? Just the map inside a tab-panel or do you need an example with the function for adding markers ?
    Could be so kind and give me a bit more details then i'll try to give you an working example.

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

      0  

    Default


    Hi!!
    I have the same problem, I can't get the function that adds a marker into my google map.
    I have view with this code:

    Ext.define('practice.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: 'Btt Tracker',
    iconCls: 'star',
    layout: 'fit',
    },
    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: 'Track'
    });
    var myToolbar=Ext.create('Ext.Toolbar', {
    docked: 'top',
    scrollable: 'horizontal'
    });
    var myButton=Ext.create('Ext.Button', {
    text: 'Mark',
    iconMask: 'true',
    iconCls: 'locate',
    id: 'miMark'
    });
    var myMap=Ext.create('Ext.Map', {
    mapOptions: {
    center: UAB,
    zoom: 3,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    navigationControl: true,
    },
    id: 'mapa'
    });
    myToolbar.add([myButton]);
    me.add([myTopBar, myToolbar, myMap]);
    }
    });

    And then I have my controller like this:

    Ext.define('practice.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
    refs: {
    miMark: '#miMark',
    mapa: '#mapa'
    },
    control: {
    miMark: {
    tap: 'mostrarMarker'
    }
    }
    },
    mostrarMarker: function(){
    Ext.Msg.alert('Show marker in map');
    var pos= new google.maps.LatLng(41.500293,2.112582);
    var marker= new google.maps.Marker({
    map: mapa.map,
    position: pos,
    visible: true,
    icon: 'darkgreen_MarkerL.png',
    });
    },


    });

    This code should be easy to show a marker in the google map when I click the button, but it doesn't. Does anyone knows why not?? It would be great to have an answer... and a possible solution PLEASE!! Thanks a lot!


film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar