Adding Marker to Sencha Touch Google Maps

Question

Hi I am trying to add a marker to sencha touch v.2.2.1 google maps. I can see the map, but not the marker. I also added the required lib: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

config: {
    items: [{
        xtype: 'map',
        itemId: 'mapHomeView',
        width: Ext.os.deviceType == 'Phone' ? null : 1500,
        height: Ext.os.deviceType == 'Phone' ? null : 350,
        useCurrentLocation: true,
        listeners: {
        maprender: function(extMapComponent, googleMapComp){
            var marker = new google.maps.Marker({
                title: 'test',
                position: new google.maps.LatLng (49.279989, -123.126333),
                map: Ext.ComponentQuery.query('#mapHomeView')[0].map,
                // map: googleMapComp,
            });

            marker.setMap(Ext.ComponentQuery.query('#mapHomeView')[0].map);
        }
    }]
}

I am using google chrome, for testing the app. I enabled the location requests in the settings.

Neither the line map: ... nor the commented map: ... line is working.

Answer 1

This solved my problem. I found it in the examples of sencha touch:

config: {
    control: {
        'map[itemId="mapHomeView"]': {
            maprender: 'mapHomeViewMapRenderer'
        }
    }
},

mapHomeViewMapRenderer: function(comp, map) {
    var map = Ext.ComponentQuery.query('#mapHomeView')[0].getMap();

    var image = new google.maps.MarkerImage(
        'resources/images/point.png',
        new google.maps.Size(32, 31),
        new google.maps.Point(0, 0),
        new google.maps.Point(16, 31)
    );

    var shadow = new google.maps.MarkerImage(
        'resources/images/shadow.png',
        new google.maps.Size(64, 52),
        new google.maps.Point(0, 0),
        new google.maps.Point(-5, 42)
    );

    var position = new google.maps.LatLng(49.279989, -123.126333);

    var marker = new google.maps.Marker({
        position: position,
        title: 'test',
        shadow: shadow,
        icon: image,
        map: map
    });
},