adding a marker to your current position on google maps

Does any of you know how to add a marker on you currentPosition in google maps using sencha?

This is my code:

var map;
var defaultLocation;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var spots;
var infowindow = new google.maps.InfoWindow();

owt.views.RoutePanel = Ext.extend(Ext.Panel, {

    title: 'route',
    fullscreen:true,
    layout: 'card',
    items: [
        map = new Ext.Map({
            useCurrentLocation: true,
            mapOptions: {zoom:10},
            listeners: {
                delay: 500,
                afterrender: function() {
                    var geo = new Ext.util.GeoLocation({
                        accuracy: 1,
                        autoUpdate: true,
                        listeners: {
                            locationupdate: function (geo) {
                                center = new google.maps.LatLng(geo.latitude, geo.longitude);
                                zoom = 10;
                               if (map.rendered){
                                    map.update(center)

                                   }
                                else{
                                    map.on('activate', map.onUpdate, map, {single: true, data: center});}
                            },
                            locationerror: function (geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                                if (bTimeout) {
                                    alert('Timeout occurred.');
                                }
                                else {
                                    alert('Error occurred.');
                                }
                            }
                        }
                    });
                    geo.updateLocation();
                    spots = [];
                    for (var i in owt.stores.spotStore.data.map) {
                        spots.push(new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat,
                                owt.stores.spotStore.data.map[i].data.lng))
                        switch (owt.stores.spotStore.data.map[i].data.categorie_id) {
                            case 1:
                   开发者_如何转开发             var image = 'assets/images/monumenten_icon.png';
                                break;
                            case 2:
                                var image = 'assets/images/horeca_icon.png';
                                break;
                            case 3:
                                var image = 'assets/images/toilet_icon.png';
                                break;
                            case 4:
                                var image = 'assets/images/shopping_icon.png';
                                break;
                        }
                        var markers = [];

                        var spotMarker = new google.maps.Marker({
                            animation: google.maps.Animation.DROP,
                            position: new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat,owt.stores.spotStore.data.map[i].data.lng),
                            map: this.map,
                            icon: image
                        });

                        google.maps.event.addListener(spotMarker, 'dblclick', (function(spotMarker, i) {

                            return function() {
                                var win1 = new Ext.Panel({
                                    floating:true,
                                    layout: "card",
                                    centered:false,
                                    scroll: 'vertical',
                                    styleHtmlContent: true,
                                    centered: true,
                                    width:280,
                                    height:140,
                                    html:'<img src="assets/images/spots/' + owt.stores.spotStore.data.map[i].data.naam.replace(/\s/g, "") + '.jpg"<div class="floatpanel"></div><h3>' + owt.stores.spotStore.data.map[i].data.naam + '</h3><p>' + owt.stores.spotStore.data.map[i].data.omschrijving + '</p></div>'
                                }).show()
                            }
                        })(spotMarker, i));
                    }
                    for (var i in owt.stores.groepStore.data.map) {
                         var groepMarker = new google.maps.Marker({
                            animation: google.maps.Animation.DROP,
                            position: new google.maps.LatLng(owt.stores.groepStore.data.map[i].data.latitude,owt.stores.groepStore.data.map[i].data.longitude),
                            map: this.map,
                             icon: 'assets/images/groepen_icon.png'
                        });
                        (groepMarker, i);
                    }
                    directionsDisplay = new google.maps.DirectionsRenderer();
                    var myOptions = {
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    }
                    directionsDisplay.setMap(this.map);
                    calcRoute();
                }
            }
        }
    )]
});


function calcRoute() {
    var waypts = [];
    for (var i = 1; i < 9; i++) {
        waypts.push({
            location:new google.maps.LatLng(owt.stores.spotStore.data.map[i].data.lat, owt.stores.spotStore.data.map[i].data.lng),
            stopover:true});
    }
    start = new google.maps.LatLng(50.80520247265613, 3.274827003479004);
    end = new google.maps.LatLng(50.8252946155155, 3.2799339294433594);
    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            var route = response.routes[0];
        }
    });
};

Ext.reg('owt-loginpanel', owt.views.RoutePanel);

I have tried a dozen different things but i just cant get the marker to show.

I tried running your code on Google Chrome. It seems like the locationupdate event gets called only the first time after I grant the browser the permission to access my current location. After refreshing the page, the locationupdate event did not get called anymore since I had already given the browser permission to access my current location.

You could try first setting up your GeoLocation object and use it to save the user's coordinates in a variable. I believe, you don't have to use it inside the Map's afterrender function. You could try outputting your center variable with console.log() to see if you're getting the user's location correctly.

After you have the location, it shouldn't be hard to put a marker on it.