Press "Enter" to skip to content

HTML5- Navigator Example

Last updated on October 4, 2019

Definition :

Navigator is display the our current location purpose to use.

Program 1 :

<html>

     <body>

                    <button onclick=”getLocation()”> Get Details </button>

                                <p id=”demo”> </p>

                                <script>

                                     var x=document.getElementById(“demo”);

                                                 function getLocation() {

                                                 if(navigator.getLocation) {

                                                 navigator.getLocation.getCurrentposition(showposition);

                                                 } else {

                                                 x.innerHTML=”GeoLocation is not supported by this browser.”

                                                 }

                                                 }

                                                 function showPosition(position) {

                                                 x.innerHTML=”Latitude:”+position.coords.latitude+”<br> Longitude:”+position.coords.Longitude;

                                                 }

                                </script>

                </body>

</html>

program 2 :

<html>

     <body>

                     <p id=”demo”> </p>

                    <button onclick=”getLocation()”> Click Me </button>

                                <div id=”mapholder”> </div>

                                <script>

                                     var x=document.getElementById(“demo”);

                                                 function getLocation() {

                                                 if(navigator.getLocation) {

                                                 navigator.getLocation.getCurrentposition(showposition, show error);

                                                 } else {

                                                 x.innerHTML=”GeoLocation is not supported by this browser.”;

                                                 }

                                                 }

                                                 function showPosition(position) {

                                                 var latlon=position.coords.latitude+”,”+position.coords.longitude;

                                                 var img url=”http://maps.googleapis.com/maps/api/staticmap?”+Location+”&zoom=18&size=400*300&sensor=false”;

                                                 document.getElementById(“mapholder”).innerHTML=”<img src=”+img-url+”>;

                                                 }

                                                 function showerror(erroe) {

                                                 switch(error.code) {

                                                 case error.PERMISSION_DENIED:

                                                 x.innerHTML=”user denied the request for Geo location.”

                                                 break;

                                                 case error.POSITION_UNAVAILABLE:

                                                 x.innerHTML=”location information is unavailable.”

                                                 break;

                                                 case error.TIMEOUT:

                                                 x.innerHTML=”the request to get user location timed out.”

                                                 break;

                                                 case error.UNKNOWN_ERROR:

                                                 x.innerHTML=”An unknown error occured.”

                                                 break;

                                                 }

                                                 }

                                </script>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *