1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    7
    Vote Rating
    0
    Rahe is on a distinguished road

      0  

    Default Unanswered: Add markers after maprender

    Unanswered: Add markers after maprender


    Hi,

    Is there any possibility of adding markers from a store after the maprender event ?
    My first screen is a Map geolocalised with some markers on it, than i tap a button wich sending me to the view of places.
    I can filter it with a ajax query with a selectfield, at the bottom of the list i have a button "Display items on the map", but when I click on this button nothing appens..
    I make this in my controller :
    Code:
    loadPlaces : function( button, e, eOpts ) {
            // Cechk right id
            if( button.id !== 'aroundPlacesDisplay' ) {
                return button;
            }
            var self = this, store = Ext.getCmp( 'aroundPlacesList' ).getStore( ), 
            map = this.getMap( ), 
            gmap = map.getMap( );
            
            if( store.getCount( ) <= 0 ) {
                return button;
            }
    
    
            store.each( function( record ) {
                //add marker using record.get
                var m = new google.maps.Marker( {
                    position : google.maps.LatLng( record.get( 'lat' ), record.get( 'lng' ) ),
                    map : gmap,
                    //icon : new google.maps.MarkerImage( record.get( 'icon' ) ),
                    title : record.get( 'title' )
                } );
    
    
                self.markers.push( m );
            } );
            this.getMain( ).pop( );
        }
    But the map is blank without any markers, why the map is not responding like a real gmap ?
    I can change the map type and map center freely...

    Thank you for your responses

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,797
    Answers
    3467
    Vote Rating
    834
    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

      0  

    Default


    Assuming loadPlaces method is executed by maprender event listener, the code looks fine as long as the data in the records is valid.
    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
    Apr 2013
    Posts
    7
    Vote Rating
    0
    Rahe is on a distinguished road

      0  

    Default


    Hi !

    Ok, then I can't add markers with the normal google map API after maprender ?
    Is there any possibility to trigger the maprender event ? Or I have to destroy the Ext.Map object, then instanciate again to tigger this event ?

    Thank you

  4. #4
    Sencha User hectorgomis's Avatar
    Join Date
    Feb 2013
    Location
    Spain
    Posts
    42
    Answers
    1
    Vote Rating
    0
    hectorgomis is on a distinguished road

      0  

    Default


    Try this directly onMaprender. Is it working?
    Code:
        onMapaMaprender: function(map, gmap, eOpts) {
    
    
            var pos= new google.maps.LatLng ('38.349196', '-0.490608');
    
    
            var marker = new google.maps.Marker({
                position: pos,
                title: 'My map',
                map: gmap
            });
        }

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    7
    Vote Rating
    0
    Rahe is on a distinguished road

      0  

    Default


    Yes all code in maprender event is working, my question is, how can I dynamically add markers after maprender event ?
    Do I have to trigger this event on my current map ?
    Why can't have access to the full google map API and add markers at anytime ?

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    148
    Answers
    12
    Vote Rating
    10
    pentool will become famous soon enough

      0  

    Default


    Click the button to add random markers to the map. Tested with ST 2.1.1.

    Every time you click the button, it will generate a marker at a random location within the centered map and add it to the map.

    app.js

    Code:
    Ext.application({
        name: 'Map',
    
    
        views: ['Locations'],
        controllers: ['Locations'],
    
    
        launch: function() {
            var a = Ext.create('Ext.Container', {
                    fullscreen: true,
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            title: 'Map with Markers',
                            items: [
                                {
                                    xtype: 'button',
                                    text: 'Add Marker',
                                    handler: function() {
                                        var myMap = Ext.ComponentQuery.query('testmap')[0];
                                        var pos = new google.maps.LatLng(
                                            (Math.random() * 0.016565) + 33.757171,
                                            (Math.random() * 0.019957) - 84.396973
                                        );
                                        var marker = new google.maps.Marker({
                                            position: pos,
                                            title : String(pos),
                                            map: myMap.getMap()
                                        });
                                    }
                                }
                            ]
                        },
                        {
                            xtype: 'testmap'
                        }
                    ]
            });
    
    
            Ext.Viewport.add(a);
        }
    });
    view/Locations.js

    Code:
    Ext.define('Map.view.Locations', {
        extend: 'Ext.Map',
        xtype: 'testmap',
    
    
        config:  {
            itemId: 'testmap',
            mapOptions: {
                center: new google.maps.LatLng(33.764307, -84.388046),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                },
                mapTypeControl: true,
                MapTypeControlStyle: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
            }
        }
    });

    controller/Locations.js

    Code:
    Ext.define('Map.controller.Locations', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                mapView: 'testmap'
            },
            control: {
                mapView: {
                    maprender: 'onMapRender'
                }
            }
        },
    
    
        onMapRender: function(comp, map) {
            setTimeout(function() {
                var center =  new google.maps.LatLng(33.764307, -84.388046);
                comp.getMapOptions().center = center;
                map.panTo(center);
            }, 0);
        }
    })

  7. #7
    Sencha User
    Join Date
    Apr 2013
    Posts
    7
    Vote Rating
    0
    Rahe is on a distinguished road

      0  

    Default


    Hi,
    In my case the "Ext.ComponentQuery.query('testmap')[0];" element return undefined, there is my app :

    App.js :
    Code:
    Ext.application( {
    	name : 'carto-mobile',
    
    
    	requires : [ 'Ext.Map', 'Ext.Button', 'Ext.SegmentedButton', 'Ext.Panel', 'Ext.Toolbar' ],
    	views : [ 'Main', 'Map', 'Settings', 'Around', 'Places', 'Place' ],
    	stores : [ 'Categories', 'Place', 'Places' ],
    	models : [ 'Category', 'Place' ],
    	controllers : [ 'Main', 'Settings', 'Map' ],
    
    
    	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( 'cgy-carto-mobile.view.Settings' ) );
    		Ext.Viewport.add( Ext.create( 'cgy-carto-mobile.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( );
    			}
    		} );
    	}
    } );
    Views/Main.js
    Code:
    Ext.define( 'carto-mobile.view.Main', {
    	extend : 'Ext.navigation.View',
    	requires : [ 'Ext.field.Search' ],
    	xtype : 'main',
    	config : {
    		iconMask : true,
    		ui : 'light',
    		fullscreen : true,
    		navigationBar : {
    			ui : 'dark',
    			docked : 'top',
    			items : [ {
    				title : 'Title',
    				xtype : 'searchfield'
    			}, {
    				text : '',
    				xtype : 'segmentedbutton',
    				iconCls : 'add',
    				items : [ {
    					xtype : 'button',
    					iconMask : true,
    					pressed : true,
    					iconCls : 'maps',
    					name : 'map'
    				}, {
    					xtype : 'button',
    					iconMask : true,
    					iconCls : 'locate',
    					name : 'around'
    				}, {
    					xtype : 'button',
    					iconMask : true,
    					iconCls : 'settings',
    					name : 'settings'
    				} ]
    			} ]
    		},
    		items :[{
    			xtype : 'MyMap'
    		}]
    	},
    	deactive : function( ) {
    		var btn = Ext.ComponentQuery.query('button[name=around]')[ 0 ];
    		btn.setDisabled( true );
    	}
    } );
    Views/Map.js
    Code:
    Ext.define( 'carto-mobile.view.Map', {
    	extend : 'Ext.Container',
    	requires : [ 'Ext.Map' ],
    	xtype : 'MyMap',
    	config : {
    		fullscreen : true,
    		layout : 'fit',
    		items : [ {
    			xtype : 'map',
    			itemId : 'mapOjb',
    			config : {
    				layout : 'fit',
    				width : '100%',
    				height : '100%',
    				mapOptions : {
    					noClear : true,
    					zoom : 12,
    					mapTypeControl : false,
    					mapTypeId : google.maps.MapTypeId.ROADMAP,
    					overviewMapControl : false,
    					streetViewControl : false
    				}
    			}
    		} ]
    	}
    } );
    Controller/Map.js
    Code:
    Ext.define( 'carto-mobile.controller.Map', {
    	extend : 'Ext.app.Controller',
    	config : {
    		refs : {
    			map : 'map',
    			main : 'main',
    			settings : 'settings',
    			around : 'around',
    			place : 'place'
    		},
    		control : {
    			'around button' : {
    				tap : 'loadPlaces'
    			}
    		}
    	},
    	markers : [ ],
    	loadPlaces : function( button, e, eOpts ) {
    		// Cechk right id
    		if( button.id !== 'aroundPlacesDisplay' ) {
    			return button;
    		}
    		var self = this, store = Ext.getCmp( 'aroundPlacesList' ).getStore( ), 
    		map = this.getMap( ), 
    		gmap = map.getMap( );
    		
    		if( store.getCount( ) <= 0 ) {
    			return button;
    		}
    
    
    		store.each( function( record ) {
    			//add marker using record.get
    			var m = new google.maps.Marker( {
    				position : google.maps.LatLng( record.get( 'lat' ), record.get( 'lng' ) ),
    				map : gmap,
    				//icon : new google.maps.MarkerImage( record.get( 'icon' ) ),
    				title : record.get( 'title' )
    			} );
    
    
    			self.markers.push( m );
    		} );
    		this.getMain( ).pop( );
    	}
    } );
    Controller/Main.js
    Code:
    Ext.define( 'carto-mobile.controller.Main', {
    	extend : 'Ext.app.Controller',
    	requires : [ 'Ext.MessageBox' ],
    	config : {
    		refs : {
    			map : 'map',
    			main : 'main',
    			settings : 'settings',
    			around : 'around',
    			places :'places'
    		},
    		control : {
    			'map' : {
    				maprender : 'mapInit',
    			},
    			'main button' : {
    				release : 'buttonTapped'
    			},
    			'around selectfield' : {
    				change : 'selectChanged'
    			},
    			'around places' : {
    				itemtap : 'showSinglePlace'
    			}
    		}
    	},
    	geo : null,
    	placesStore:null,
    	placesProxy:null,
    	placeStore : null,
    	mapInit : function( map ) {"use strict";
    		var main = this.getMain( );
    		this.geo = Ext.create( 'Ext.util.Geolocation', {
    			autoUpdate : false,
    			listeners : {
    				locationupdate : function( geo ) {
    					map.setMapCenter( {
    						latitude : geo.getLatitude( ),
    						longitude : geo.getLongitude( )
    					} );
    				},
    				locationerror : function( ) {
    					Ext.Msg.alert( 'Erreur', 'Vous devez accepter de partager votre position pour avoir accès à toutes les fonctionnalités.' );
    					main.deactive( );
    				}
    			}
    		} );
    		this.geo.updateLocation( );
    
    
    	},
    	buttonTapped : function( button, e, eOpts ) {"use strict";
    		var settings = this.getSettings( ),
    		around = this.getAround();
    		
    		if( button.name === 'settings' ) {
    			if( settings.isHidden( ) ) {
    				settings.show( );
    			} else {
    				settings.hide( );
    			}
    		} else {
    			settings.hide( );
    		}
    		
    		// On around button, load the around view
    		if( button.name === 'around' && typeof( around ) === 'undefined' ) {
    			around = Ext.create( 'cgy-carto-mobile.view.Around' );
    			// Add the view to the main view
    			this.getMain().push( around );
    			
    			// Set the places store
    			this.SetPlacesStore();
    			
    			// Get the places and set the current store to it
    			Ext.getCmp( 'aroundPlacesList' ).setStore( this.placesStore );
    		}
    		if( button.name === 'map' ) {
    			this.getMain().pop();
    		}
    	},
    	SetPlacesStore : function() {
    		if( !this.placesStore ) {
    			// Create a places store and get the proxy
    			this.placesStore = Ext.create( 'cgy-carto-mobile.store.Places' );
    			this.placesProxy = this.placesStore.getProxy( );
    			
    			// Add to the proxy the places from the user position, load the places
    			this.placesProxy.setExtraParams( { 'lat': this.geo.getLatitude( ) , 'lng': this.geo.getLongitude( ) } );
    		}
    		
    		// Add extra params based on the category + around selected
    		this.placesProxy.setExtraParam( 'term' , Ext.getCmp( 'aroundCategory' ).getValue() );
    		this.placesProxy.setExtraParam( 'distance' , Ext.getCmp( 'aroundArea' ).getValue() );
    		this.placesStore.removeAll();
    		this.placesStore.load();
    	},
    	selectChanged : function( el, newValue, oldValue, eOpts  ) {
    		if( newValue !== oldValue ) {
    			this.SetPlacesStore();
    		}
    	},
    	showSinglePlace : function( list, index, target, record, e, eOpts) {
    		var self = this;
    		
    		self.place = Ext.create( 'cgy-carto-mobile.view.Place' );
    		
    		// Create the store if needed
    		if( !self.placeStore ) {
    			self.placeStore = Ext.create( 'cgy-carto-mobile.store.Place' );
    			self.placeProxy = self.placeStore.getProxy( );
    		}
    
    
    		// Get the proxy
    		// Add the extraparams
    		self.placeProxy.setExtraParam(  );
    		
    		// Add to the proxy the place from the user position
    		this.placeProxy.setExtraParams( { 'id' : record.get( 'id' ), 'lat': this.geo.getLatitude( ) , 'lng': this.geo.getLongitude( ) } );
    		
    		// Load the datas
    		self.placeStore.load( function( records ) {
    			var record = records.pop(), carousel, content;
    			// Add the record
    			self.place.setRecord( record );
    			
    			// Put the carousel Data
    			if( !carousel ) {
    				carousel = Ext.getCmp( "carouselPlace" );
    			}
    			
    			// Set the items for the carousel
    			carousel.setItems( record.get( 'content_mobile' ) );
    			
    			// Put the carousel Data
    			if( !content ) {
    				content = Ext.getCmp( "contentPlace" );
    			}
    			
    			// Set the items for the carousel
    			content.setHtml( record.get( 'content' ) );
    			
    			// Set title of the current view
    			self.place.config.title = record.get( 'title' );
    			
    			// Push the elements to the place
    			self.getMain().push( self.place );
    		} );
    	}
    } );
    I don't know why the markers are not set on the map but this is maybe related to the view ?
    But the map isn't reinitalized when changing view.

  8. #8
    Sencha User
    Join Date
    Apr 2013
    Posts
    7
    Vote Rating
    0
    Rahe is on a distinguished road

      0  

    Default


    I finally found the solution !
    You have to put the latlng object in a variable for plavcing the map marker correctly, so the original code have to be edited like this :

    Code:
    loadPlaces : function( button, e, eOpts ) {
            // Cechk right id
            if( button.id !== 'aroundPlacesDisplay' ) {
                return button;
            }
            var self = this, store = Ext.getCmp( 'aroundPlacesList' ).getStore( ), 
            map = this.getMap( ), 
            gmap = map.getMap( ),
            m,
            pos;
            
            if( store.getCount( ) <= 0 ) {
                return button;
            }
    
    
    
    
            store.each( function( record ) {
                //add marker using record.get
              pos = google.maps.LatLng( record.get( 'lat' ), record.get( 'lng' ) );
                m = new google.maps.Marker( {
                    position : pos,
                    map : gmap,
             
                    title : record.get( 'title' )
                } );
    
    
    
    
                self.markers.push( m );
            } );
            this.getMain( ).pop( );
        }
    And this is working !
    So thank you for your responses !

Thread Participants: 3

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi