1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    144
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default Answered: using a store to load markers on a google map

    Answered: using a store to load markers on a google map


    How do you load markers from a sencha touch store onto a google map?
    What comes around goes around

  2. Worked it out, the onMapMaprender callback should be like this:

    Code:
    onMapMaprender: function(map, gmap, options) {
    
    	var updatesStore = Ext.getStore("StoresStore");
    
    
    	updatesStore.load();
    
    
    	updatesStore.each(function(record){
    
    
                var m = new google.maps.LatLng(record.data.lat,
                                               record.data.lon);
    
    
    	    new google.maps.Marker({
    	        position: m,
    	        map: gmap,
    	        draggable: false,
    	        animation: google.maps.Animation.DROP
    	    });
    
    
                //console.log(record);                                                                                                                  
            });
    
    
        }
    However any suggestions on how to do this via using a controller would be ideal.

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi!

    you may get data from your store by using proxy and used it to render marker on your map.

    Sample for placing marker:-
    Code:
    // use a loop here
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(yourStoreRecords[i].get('lat'), yourStoreRecords[i].get('lng')),
        map: yourMap
    });
    For more info on google markers, you may check this:-
    https://developers.google.com/maps/d...cript/overlays
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    144
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    Cool. Ignoring the proxy part for now. How do I get an array of the store, so I can look through it. See my code TODO comment below.

    Code:
      Ext.define('app.store.MapStore', {    extend: 'Ext.data.Store',
    
    
        config: {
    
    
            model: 'app.model.Store',
    
    
            sorters: 'markerName',
    
    
            // could use a proxy to get data, or just define it here!               
            data: [
    
    
                { ID: 1, markerName: 'A', lat: 27.3, lon: 26.3 },
                { ID: 2, markerName: 'B', address: "", lat: 27.31, lon: 26.31 },
                { ID: 3, markerName: 'C', address: "", lat: 27.32, lon: 26.32 },
                { ID: 4, markerName: 'D', lat: 27.33, lon: 26.33 }
    
    
    	]
    
    
        }
    
    
    });
    
    Ext.define("app.view.Map", {
        extend: 'Ext.Map',
        xtype: 'mappanel',
    
    
        config: {
            title: 'Map of Locations',
    	scrollable: true,
            styleHtmlContent: true,
    	useCurrentLocation: true,
    
    
            store: 'MapStore',
    
    
            listeners: [
                {
                    fn: 'onMapMaprender',
                    event: 'maprender'
                }
            ]
    
    
        },
    
    
        onMapMaprender: function(map, gmap, options) {
    
            // TODO - get yourStoreRecords array
    
    
    	for (var i = 0; i < yourStoreRecords.count(); i++) {
    
    
                var m = new google.maps.LatLng(yourStoreRecords[i].get('lat'),
                                                                       yourStoreRecords[i].get('lon')),
    
    
                new google.maps.Marker({
    		position: m,
    		map: gmap,
    		draggable: false,
    		animation: google.maps.Animation.DROP
                });
    	}
        }
    
    
    });
    Best Regards,
    What comes around goes around

  5. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    144
    Answers
    19
    Vote Rating
    0
    coletek is on a distinguished road

      0  

    Default


    Worked it out, the onMapMaprender callback should be like this:

    Code:
    onMapMaprender: function(map, gmap, options) {
    
    	var updatesStore = Ext.getStore("StoresStore");
    
    
    	updatesStore.load();
    
    
    	updatesStore.each(function(record){
    
    
                var m = new google.maps.LatLng(record.data.lat,
                                               record.data.lon);
    
    
    	    new google.maps.Marker({
    	        position: m,
    	        map: gmap,
    	        draggable: false,
    	        animation: google.maps.Animation.DROP
    	    });
    
    
                //console.log(record);                                                                                                                  
            });
    
    
        }
    However any suggestions on how to do this via using a controller would be ideal.
    What comes around goes around

  6. #5
    Sencha User Pulp Fiction's Avatar
    Join Date
    Mar 2013
    Location
    Italy
    Posts
    75
    Answers
    2
    Vote Rating
    -1
    Pulp Fiction is an unknown quantity at this point

      0  

    Default


    Hi, I have a problem with regard to the creation of the markers. I would like to display a marker at a time, while with the store.each I see on the map all the markers loaded from the store. How can I fix this?

    This is the listeners for the creation of the map:

    Code:
    listeners: {
        maprender: function(comp, map) {
           var store = Ext.getStore("Eventi");
           store.each(function(record,id){
              var geocoder = new google.maps.Geocoder();
              geocoder.geocode({'address' : record.get('indirizzo')}, function(results, status){
                 if (status == google.maps.GeocoderStatus.OK) {
                   map.setCenter(results[0].geometry.location);
                   var marker = new google.maps.Marker({
                      position: results[0].geometry.location,
                      map: map
                   });
                   google.maps.event.addListener(marker, 'click', function() {
                       infowindow.open(map, marker);
                   });
                   setTimeout( function(){
                      map.panTo (results[0].geometry.location);
                   });
                }
             });
         });
      }
    }

Thread Participants: 2