google maps implementation in sencha touch 2 (the MVC way)

Question

can anyone please point me in the right direction about how to implement google maps in sencha touch 2.2.1 in an MVC fashion? a good step by step tutorial maybe?

I need to have a view and a controller but am not sure what is the correct way of doing it as regards defining map options and initializing the map. Been looking at various tutorials on the Internet but none of them matches exactly what I want to implement.

I am using a tab panel and my map needs to be displayed when clicking one of the tabs (called Location)...

Answer 1

first, you have to put the map panel as item of your tab container:

{
  xtype: 'map',
  useCurrentLocation: false,
  mapOptions: {
    disableDefaultUI: true,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
}

next, you can refer to it in the specific controller for this view in this way:

config: {
  refs: {
    ...
    mymap: '.map',
    ...
  },
  ...
}

in that way you can have a reference of your map object in the controller by typing:

this.getMymap()

and can attach an handler to the map to make some action on it when it is rendered:

this.getMymap().on('maprender', this.onMapRender, this, { single: true });

where "onMapRender" is a method of your controller. You have to do in that way if you want, for example, render a marker over the map and center it, because before the "maprender" event dispatched by the map, you can not do any action over it (the GMap object simply does not yet exists), so, for example, in your controller, the handler could be:

onMapRender: function(e) {
    var latLngCoordinates = new google.maps.LatLng(..., ...)
        marker = new google.maps.Marker({
            position: latLngCoordinates,
            animation: google.maps.Animation.DROP,
            map: this.getMymap().getMap()
        });

    this.getMymap().setMapCenter(latLngCoordinates);
}

enjoy with it ;)