sampleActionFunctionWithLatLong.vfp

<apex:page standardController="Lead" showHeader="false" sidebar="false" id="page">
     <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    
    <style>
    	#spinner{
        display: none;
        width:300px;
        height: 70px;
        position: fixed;
        top: 50%;
        left: 50%;
        text-align:center;
        padding:10px;
        font:normal 16px Tahoma, Geneva, sans-serif;
        margin-left: -100px;
        margin-top: -100px;
        z-index:2;
        overflow: auto;
        border:1px solid #CCC;
        background-color:white;
        z-index:100;
        padding:5px;
        line-height:20px;
     }
     #opaque {
         position: fixed;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%;
         z-index: 1;
         display: none;
         background-color: gray;
         filter: alpha(opacity=30);
         opacity: 0.3;
         -moz-opacity:0.3;
         -khtml-opacity:0.3
     }
     * html #opaque {
         position: absolute;
     }
    </style>
    

    <center>
            <apex:form id="form">
                <apex:actionFunction action="{! save}"  name="updateLoc"/>
                <apex:actionFunction action="{! cancel}"  name="goBack"/>
                <apex:pageBlock title="Lead Location" id="pageblock">
                    <apex:pageBlockSection id="pagesection">
                        <apex:inputField id="latitude" value="{! lead.Location__latitude__s}" />   
                        <apex:inputField id="longitude" value="{! lead.Location__longitude__s}" />
                    </apex:pageBlockSection>
                </apex:pageBlock>
            </apex:form>
        
        	<div id="opaque"/>
           	<div id="spinner">
                <p align="center" style='{font-family:"Arial", Helvetica, sans-serif; font-size:20px;}'>
                    Please wait <br/>We are identifying your location </p>
           	</div>
    </center>
    
    
    <script>
    	
	function onSuccess (position) {

            document.getElementById ("{!$Component.page.form.pageblock.pagesection.latitude}").value = position.coords.latitude.toString ();
            document.getElementById ("{!$Component.page.form.pageblock.pagesection.longitude}").value = position.coords.longitude.toString ();
        	updateLoc ();
        }
    
    	function onError (error) {
        	var err = 'Unknown Error';
            switch (error.code) {
            	case error.PERMISSION_DENIED:
                 	err = 'User denied the permission for the request';
                    break;
                case error.POSITION_UNAVAILABLE:
                    err = 'Location information unavailable';
                    break;
        		case error.TIMEOUT:
                    err = 'The request timed out';
                    break;
        		case error.UNKNOWN_ERROR:
                    err = 'An unknown error occured';
                    break;
            }
            alert (err);
            goBack ();
        }
    
    
    	function showSpinner() {
           document.getElementById('opaque').style.display='block';
           var popUp = document.getElementById('spinner');
           popUp.style.display = 'block';
        } 
    	
    	if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition (onSuccess, onError);  
          	showSpinner ();
        }
    </script>
    
</apex:page>