Goole Map - Track your moving Position on google map- html5

This will enable to you get the current position of your location in mobile. First it will tell your current position on the Google map in form of Pushpin. When you start changing your position then pushpin will start moving. It will be follow you. But GPS and internet must be support by your mobile and off-course it should be enabled in your mobile. It will also work in 2G/3G/4G. It will give your more accurate when you are in City area.

How its work:
It will check your current position with use of browser html5 property. Thats why it ask "Are you want to share your current location".To see your position you must give the access of your current position to the browser. After getting your position it simply plot on google map. When you change your position it recheck the position with use of GPS and update the pushpin on google map.

Initializing...

<style>
    body {font-family: Helvetica;font-size:13pt;padding:0px;margin:0px}
    #map_canvas{display:none; height:100%; width:100%; position:relative;z-index:1;}
    #current {padding:5px; background-color:#000; position:unset; left:0px;z-index:2;text-align:center;width:90%;opacity:0.4;color:#FFF;border-radius:0px 0px 5px 5px; font-weight:bold;}
    #btnCont{position:absolute; bottom:0px; left:0px; width:100%; text-align:center;z-index:2;}</style>


<div id="current">
Initializing...</div>
<div id="map_canvas" style="height: 300px; width: 800px;">
</div>
<div id="btnCont" style="display: none;">
<button onclick="startAgain();"> Restart Tracking</button>
    <button onclick="stopTracking();"> Stop Tracking</button>
</div>
<script charset="utf-8" src="//mapduck.com/js/geoPosition.js" type="text/javascript"></script>
<script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>


<script>
    var gmap = null;
    var markers = [];
    var opts = {
        enableHighAccuracy: true,
        timeout: 60000,
        maximumAge: 0
    };
            
    function initialiseMap(){
        var myOptions = {
            minZoom : 3,
            zoom: 10,
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            navigationControl: true,
            navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
            mapTypeId: google.maps.MapTypeId.ROADMAP      
        } 
        gmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
      
    function initialise(){
        if(geoPosition.init())
        {
            document.getElementById('current').innerHTML="Receiving...";
            geoPosition.getCurrentPosition(showPosition,handle_errors,opts);
        }
        else
        {
            document.getElementById('current').innerHTML="Functionality not available";
        }
    }
            
    function handle_errors(error){
        var error_str='';
        switch(error.code)
        {
            case error.PERMISSION_DENIED: 
                error_str="User(you) did not share your geolocation";
                break;
 
            case error.POSITION_UNAVAILABLE: 
                error_str="Could not detect current position";
                break;
 
            case error.TIMEOUT: 
                error_str="retrieving position timed out";
                break;
 
            default: 
                error_str="unknown error";
                break;
        }
        document.getElementById('current').innerHTML=error_str;
    }
   
    function showPosition(p){
        if(gmap == null){
            document.getElementById('map_canvas').style.display = 'block';
            initialiseMap();
        }
        var latitude = parseFloat( p.coords.latitude );
        var longitude = parseFloat( p.coords.longitude );
        document.getElementById('current').innerHTML="Lat = " + latitude.toFixed(2) +" and Long = " + longitude.toFixed(2);
        var location = new google.maps.LatLng( latitude , longitude);
        gmap.setCenter(location);

        var marker = new google.maps.Marker({
            position: location,
            map: gmap,
            title:"You are here"
        });
        markers.push(marker);
    
        var infowindow = new google.maps.InfoWindow({
            content: "<strong>This is your current location.</strong>"
        });
    
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(gmap,marker);
        });
        document.getElementById('btnCont').style.display = 'block';
    }
   
    function setAllMap(map) {
        for (var i = 0; i &lt; markers.length; i++) {
            markers[i].setMap(map);
        }
    }
    
    function deleteMarkers() {
        setAllMap(null);
        markers = [];
    }
            
    var watchID = navigator.geolocation.watchPosition(trace,handle_errors,opts);
   
    function trace(position){
        geoPosition.getCurrentPosition(position);
        deleteMarkers();
        showPosition(position);
    }
   
    function startAgain(){
        navigator.geolocation.clearWatch(watchID);
        watchID = navigator.geolocation.watchPosition(trace,handle_errors,opts);
    }   
   
    function stopTracking(){
        navigator.geolocation.clearWatch(watchID);
    }
    google.maps.event.addDomListener(window, 'load', initialise);

</script>

Best Related Posts are Following:

1. How can I check whether Google Maps is fully loaded in GMaps v3.
2. Goole Map - Track your moving Position on google map- html5.
3. Google Maps - Modifying Controls.
4. Google Map Integration Add InfoWindow in Marker.
5. Google Map - Add a marker.
6. Google map integration.