Google MAP Javascript - Rotating icon based on Iphone compass direction

ive been working on a simple google map project where I want it to add marker of your actual location and also track your orientation based on your Iphones compass direction.

So far I got everything working fine except for one little quirk. When i load the map alot of the times the icon dosent actually point to where you orientating your Iphone. I would usually have to point my phone usually oposite direction, reload the page and then it sorta gets it correctly. It dosent seem to be using actual compass data bu rather rotational data from the gyro.

My code is quite long but this is the part that does all the magic.

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


if (navigator.geolocation) {
    watchPositionId = navigator.geolocation.watchPosition(success, error, options);

}

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


if (window.DeviceOrientationEvent) {

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

Would anyone know if theres a more accurate way to get the actual compass data rather than the gyro. Or could it be that im not processing the data correctly?

Curios to know if anyone had this problem?