Sencha touch - unable to google map markers

Question

I'm learning sencha touch and trying put markers on the google map. I've looked at most of the examples online but I'm unable to get the marker and the infoWindow to work. Below is my code:

myApp.views.MapCard = Ext.extend(Ext.Panel, {
    id: "mapcard",
    layout: 'card',
    initComponent: function() {
        this.map = new Ext.Map({
            useCurrentLocation: true,
            mapOptions: {
                zoom: 12,
            },
        });

        this.panel = new Ext.Panel({
            layout: 'fit',
            items: this.map,
        });

        this.items = this.panel;

        myApp.views.MapCard.superclass.initComponent.call(this);

        refresh = function(theMap) {
            var geoTag = {
                lat: '47.584863',
                longi: '-122.147026',
                text: 'Hello World',
            }
            addMarker(geoTag, theMap);
        }

        addMarker = function(geoTag, theMap) {
            var latLng = new google.maps.LatLng(geoTag.lat, geoTag.longi);
            var marker = new google.maps.Marker({
                map: theMap.map,
                position: latLng
            });

            google.maps.event.addListener(marker, "click", function() {
                geoTagBubble.setContent(tweet.text);
                geoTagBubble.open(theMap.map, marker);
            });
        };

        geoTagBubble = new google.maps.InfoWindow();

        refresh(this.map);
    },

});

Ext.reg('mapcard', myApp.views.MapCard);

I'm also unable to get the current location of the user, I'm pretty sure that the map is not loaded during the initComponent. I would be calling a json service to pull the lat/lon and loop through later. If there is a better implementation, please let me know!

Thanks a ton!

The Mighty Chris The Mighty Chris · Accepted Answer · 2012-01-05T05:07:04

Here's a pretty minimal example application that demonstrates this: http://septa.mobi

You can find the source code under view-source or on GitHub: https://github.com/mjumbewu/Septnuts/

Here's panel where marker are added to a map: https://github.com/mjumbewu/Septnuts/blob/master/src/Septnuts/MapPanel.js

WARNING: there is a bug in Sencha Touch 1.x that prevents embedded Google Maps from receiving ANY click events

You need to include this patch after including sencha-touch.js in order for any click listener on the map to work: https://github.com/mjumbewu/Septnuts/blob/master/src/sencha-maptouch-patch.js

Sencha touch - unable to google map markers

1 Answers