<apex:page controller="RN_GeoWithJSController" wizard="true">
   <script type="text/javascript">
    window.onload=function(){getLocation()};
    function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else { 
        alert("Geolocation is not supported by this browser.");
    }
    }
    function showPosition(position) 
    {
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        document.getElementById('{!$Component.form.pb.hidden1}').value = lat;
        document.getElementById('{!$Component.form.pb.hidden2}').value = long;
        var latlon = lat+","+long;
        var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+latlon+"&zoom=14&size=800x300&sensor=false";
        document.getElementById('{!$Component.form.pb1}').innerHTML = "<img src='"+img_url+"'>";
        myFunction();
    }
    function myFunction() {
    
    var person = prompt("Please enter your name and be calm , We are tracking your location", "Harry Potter");
    if (person != null) {
        document.getElementById('{!$Component.form.pb.lanName}').value = person;
    }
    save();
}
    </script>
    <apex:form id="form">
    <apex:actionFunction name="save" action="{!saveLocation}" rerender="pb" />
        <apex:pageBlock id="pb">
            <apex:pageBlockButtons >
                <apex:commandButton value="Save" action="{!saveLocation}" />
                <apex:commandButton value="Cancel" action="{!cancelLocation}"/>
            </apex:pageBlockButtons>
            Name:<apex:inputField value="{!objLongnLat.Name}" id="lanName"/>
            <apex:inputHidden value="{!objLongnLat.Location__Latitude__s}" id="hidden1"/>
            <apex:inputHidden value="{!objLongnLat.Location__Longitude__s}" id="hidden2"/>
        </apex:pageBlock>
        <apex:pageBlock id="pb1">
           
        </apex:pageBlock>
    </apex:form>
</apex:page>

public class RN_GeoWithJSController 
{
    public LongitudeAndLatitude__c objLongnLat {get;set;}
   
    public RN_GeoWithJSController()
    {
        objLongnLat = new LongitudeAndLatitude__c();
    }
    public PageReference saveLocation()
    {
        insert objLongnLat;
        string strlocation = objLongnLat.Location__Latitude__s +','+ objLongnLat.Location__Longitude__s;
        //PageReference acctPage = new ApexPages.StandardController(objLongnLat).view();
        PageReference acctPage = new PageReference('http://maps.googleapis.com/maps/api/staticmap?center='+strlocation+'&zoom=14&size=400x300&sensor=false');
        acctPage.setRedirect(true);
        return acctPage;
    }
    public PageReference cancelLocation()
    {
        PageReference acctPage = new PageReference('https://ap1.salesforce.com/');
        acctPage.setRedirect(true);
        return acctPage;
    }
}