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,604
    Answers
    3449
    Vote Rating
    818
    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