How do I display results on a google map in Sencha Architect?

[peterdlock]

Hi,

Extremely new to Sencha and Architect. I am trying to write an app that uses geolocation to detect where a user is and display all the relevant businesses within a certain radius on a Google Map.

Struggling with how I try and do this. If anyone is able to offer any help or push me in the direction of some relevant documentation, it would be greatly appreciated. I am extremely lost with how I build this.

Thanks,
Pete.

[sword-it]

Hi!

i guess you have address of current location of user and want to shoew in google maps..

try this:-
use a iframe or something in which gmap will be shown and give its href as

src="https://maps.google.com/?q=Your Address&t=m&z=12&output=embed">

or if you have latitude and longitude position, you may use ll= instead of q
(the order has to be latitude first, then longitude and it has to be in decimal format.)

For more info on gmaps queries, check this:-
http://querystring.org/google-maps-q...ng-parameters/

[mwindley]

http://querystring.org/google-maps-query-string-parameters/
http://www.youtube.com/watch?v=wAyvMnopzEk
https://developers.google.com/maps/documentation/javascript/reference#LatLng

what kind of results do you want to show, markers?
Have fun getting a map working, use map options to zoom,
Markers, Bounds and other features can be interesting, post when you are up to this and we can share more
I am learning as well.
Maurice

[peterdlock]

I have a marker appearing which shows the location I am at, so that is a start. Quite happy with that haha!

I want to build an app that shows all the relevant wine businesses in the "users" area, ie they open the app in their city and it shows them the wine bars, wine shops or wineries near them.

Going through the links you have both shared, and I am still a bit lost about how I do this.

Thanks for the help so far guys!

[blin]

You may find this snippet useful (hit tidesdemo.appspot.com with desktop Chrome browser to see it work - also drag the marker to either East Coast or West Coast - data coverage area, if you are not in one)

Also, if somebody could give me an idea why it only works in Chrome (and not even mobile Chrome) that would be great
------------------------------------------------------------------------

Ext.define('BayWatch.controller.Map', {
    
    extend: 'Ext.app.Controller',
    views: ['BayWatch.view.Map'],
    refs: {
        mainView :         '#mainView',
        mapView :        '#mapView'
    },
        
    launch: function () {


        BayWatch.app.tidesStore.on('load', this.onTidesLoad, this);
        
    },


    onTidesLoad: function(store, records, success) {
        
        console.log('Map: store loaded - starting mapping markers');
        this.removeTidesMarkers();
        this.addTidesMarkers(); 
        
    },
    
    addTidesMarkers: function(){
        
    var mv = Ext.getCmp('extmap');
        var map = mv.getMap(); 
        var sr = ' ';
        BayWatch.app.tidesStore.each(function(record){ 
            if (record.get("stationName") != sr){
                sr = record.get("stationName");
                console.log(sr);    
                var position = new google.maps.LatLng(record.get("latitude"), record.get("longitude"));
                var iconType;
                if (record.get('type') == 'H'){
                    iconType = 'up';
                }else{
                    iconType='down';
                };
                var imageIconPath = 'app/resources/icons/' + iconType + '/marker-images';        
                var image = new google.maps.MarkerImage(
                        imageIconPath + '/image.png',
                        new google.maps.Size(24,24),
                        new google.maps.Point(0,0),
                        new google.maps.Point(12,24)
                );


                var shadow = new google.maps.MarkerImage(
                        imageIconPath + '/shadow.png',
                        new google.maps.Size(40,24),
                        new google.maps.Point(0,0),
                        new google.maps.Point(12,24)
                );


                var shape = {
                        coord: [16,0,18,1,19,2,20,3,21,4,22,5,23,6,23,7,23,8,23,9,23,10,23,11,23,12,23,13,23,14,23,15,23,16,23,17,22,18,21,19,21,20,20,21,18,22,17,23,6,23,5,22,4,21,3,20,2,19,1,18,1,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,1,6,1,5,2,4,3,3,4,2,5,1,7,0,16,0],
                        type: 'poly'
                };


                var marker = new google.maps.Marker({
                    icon: image,
                    shadow: shadow,
                    shape: shape,
                    map: map,
                    position: position,
                    title : record.get('stationName'),
                    visible: true
                });


                BayWatch.app.tidesMarkers.push(marker);
                
                google.maps.event.addListener(marker, 'click', function() {            
                    var time = record.get("time");
                    var waterType = record.get("type") == 'L'?
                            '<span style="color:red">low water</span>':
                            '<span style="color:green">high water</span>'
                    ;
                    var one_hour=1000*60*60;
                    var now = new Date();
                    var deltaTime = Math.ceil((time.getTime()-now.getTime())/(one_hour)); 
                    infoWindow = new google.maps.InfoWindow({ content: 
                        record.get("stationName") + 
                        ' - ' +
                        waterType +
                        ' in ' + deltaTime + ' hours - ' +
                        record.get("waterLevel") + ' ' + BayWatch.app.units + '<br> on ' + time.toLocaleString()
                    }),map, marker;


                    if (BayWatch.app.openTidesInfoWindow){
                        BayWatch.app.openTidesInfoWindow.close();
                        };
                    infoWindow.open(map, marker);
                    BayWatch.app.openTidesInfoWindow = infoWindow;
                });
                
            };


        }); 
        console.log('Map : finished mapping');


    },
    removeTidesMarkers : function (){
        
        markers = BayWatch.app.tidesMarkers;
        for (var i = 0; i < markers.length; i++ ){
            markers[i].setMap(null);
        }
        
    }
});
--------------------------------------------------
Ext.define('BayWatch.view.Map', {
    id : 'mapView',
    extend: 'Ext.Container',
    requires: 'Ext.Map',
    alias : 'widget.mapview',
    config: {
        layout: 'fit',
        items: [
                {
                    id : 'extmap',
                    xtype   : 'map',
                    useCurrentLocation : false,
                    mapOptions : {
                            zoom: 10,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                          }


                }
                ]
    },
    initialize : function (){
        var emap = Ext.getCmp('extmap');
        emap.setGeo(BayWatch.app.geo);
    }
});