Results 1 to 2 of 2

Thread: Using store data in a map panel

  1. #1

    Default Using store data in a map panel

    I have the following store:

    Code:
    Ext.regStore('NearbyShopsStore', {
        model: 'Shop',
        sorters: 'suburb',
        autoLoad: true,
        pageSize: 15,
        clearOnPageLoad: false,
        getGroupString: function(record) {
            return record.get('suburb');
        },
        proxy: {
            type: 'scripttag',
            url: 'http://api.example/shops/nearby.json',
            reader: {
                type: 'json',
                root: 'results'
            },
            listeners:{
                exception:function(proxy, response, orientation){
                    Ext.Msg.alert('API connectivity error.', response.statusText);
                }
            }
        }
    });
    And the following MapView file. I am trying to use the store data (which contain lat, lng values) and plot each result as marker on the map.

    Does anyone know the best approach here?

    Code:
    shopper.views.LocationMap = Ext.extend(Ext.Panel, {
    
    
        initComponent: function(){
    
    
            this.dockedItems = [{
                xtype: 'toolbar',
                title: 'Location',
                items: [{xtype: 'spacer', flex: 1}, {
                    ui: 'plain',
                    iconCls: 'action',
                    iconMask: true,
                    scope: this,
                    handler: function(){
                        
                        Ext.Msg.confirm('External Link', 'Open in Google Maps?', function(res){
                            if (res == 'yes') window.location = this.permLink;
                        }, this);
                    }
                }]
            }]
            
            var infowindow = new google.maps.InfoWindow({
                content: this.mapText
            });
            
            this.map = new Ext.Map({
                useCurrentLocation: true,
                mapOptions : {
                    zoom: 14,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
                },
                listeners: {
                    maprender : function(comp, map) {
                        
                        var marker = new google.maps.Marker({
                             position: position,
                             title : 'Your location!',
                             map: map
                        });
    
    
                        infowindow.open(map, marker);
    
    
                        google.maps.event.addListener(marker, 'click', function() {
                             infowindow.open(map, marker);
                        });
                    }
                }
            });
            
            this.items = this.map;
            
            shopper.views.LocationMap.superclass.initComponent.call(this);
        }
    });
    
    
    Ext.reg('location', shopper.views.LocationMap);

  2. #2

    Default

    Would I be best to add a function to the store which is called on load and plots items in the map?

    Any help would be greatly appreciated.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •