Google maps js API V3: show orientation arrow on "my location marker"

Question

Using Google maps js API V3 I've easily added a marker to show the user's location (based on navigator.geolocation).

How can I add an arrow which indicates the orientation by which the user is moving (probably using the deviceorientation event)?

Edit: this is my current code:

function addUserLocation() {

    myLocationMarker = new google.maps.Marker({
        clickable : false,
        icon : new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/mobile/mobileimgs2.png', new google.maps.Size(22, 22), new google.maps.Point(0, 18), new google.maps.Point(11, 11)),
        shadow : null,
        zIndex : 999,
        title : 'me',
        map : map
    });

    enableWatchPosition();
}

function enableWatchPosition() {
    if (navigator.geolocation) {
        watchPositionId = navigator.geolocation.watchPosition(locateByBrowser, handleErrorGettingLocation, {
            timeout : 30000,
            enableHighAccuracy : true,
            maximumAge : 1000
        });
    }
}

function locateByBrowser(location) {

    var currentLocation = new google.maps.LatLng(location.coords.latitude, location.coords.longitude);
    myLocationMarker.setPosition(currentLocation);
}

Currently the location marker is just a blue dot. I want to add an arrow showing the direction the user goes in, just like it appears on google maps mobile app, for example.

I thought of using the deviceorientation event to get the alpha values while the user moves with his phone, then rotate the arrow image by the alpha value, as explained here:

http://mobiforge.com/design-development/html5-mobile-web-device-orientation-events

I just thought I'm probably not the first one to add that using google maps js api v3, so maybe someone has a working example

Answer 1

So I ended up with this solution, which works great:

1) Changed my location marker's icon to be a symbol (svg path notation) instead of image.
2) Added a listener to the deviceorientation event which changes the rotation of the symbol.

I've just changed the addUserLocation function and added the enableOrientationArrow function which does all the work.

The code changed to this:

function addUserLocation() {

    myLocationMarker = new google.maps.Marker({
        clickable : false,
        icon: {
              path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
              strokeColor : '#3333FF',
              strokeWeight : 5,
              scale: 2.5
            },
        shadow : null,
        zIndex : 999,
        title : genProps.pMyLocationTitle,
        map : map
    });

    enableWatchPosition();
    enableOrientationArrow();
}

function enableOrientationArrow() {

    if (window.DeviceOrientationEvent) {

        window.addEventListener('deviceorientation', function(event) {
            var alpha = null;
            //Check for iOS property
            if (event.webkitCompassHeading) {
                alpha = event.webkitCompassHeading;
            }
            //non iOS
            else {
                alpha = event.alpha;
            }
            var locationIcon = myLocationMarker.get('icon');
            locationIcon.rotation = 360 - alpha;
            myLocationMarker.set('icon', locationIcon);
        }, false);
    }
}