Geolocation in HTML ..

- June 26, 2021

An HTML script that uses your longitude and latitude to find your location in Google Maps by Google Maps API key ..

The source code ..

< !DOCTYPE
html >
< html >
< head >
< title > Geolocation
API < / title >
< / head >
< body >
< h2 > Find
Your
Location in below
Map < / h2 >
< button
onclick = "getlocation();" > Show
Position < / button >
< div
id = "demo"
style = "width: 600px; height: 400px; margin-left: 200px;" > < / div >

< script
src = "https://maps.google.com/maps/api/js?sensor=false" > < / script >

< script
type = "text/javascript" >
function
getlocation()
{
if (navigator.geolocation)
{
    navigator.geolocation.getCurrentPosition(showPos, showErr);
}
else {
    alert("Sorry! your Browser does not support Geolocation API")
}
}
// Showing
Current
Poistion
on
Google
Map
function
showPos(position)
{
    latt = position.coords.latitude;
long = position.coords.longitude;
var
lattlong = new
google.maps.LatLng(latt, long);
var
myOptions = {
    center: lattlong,
    zoom: 15,
    mapTypeControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
}
var
maps = new
google.maps.Map(document.getElementById("demo"), myOptions);
var
markers =
new
google.maps.Marker({position: lattlong, map: maps, title: "You are here!"});
}

// Handling
Error and Rejection
function
showErr(error)
{
    switch(error.code)
{
    case
error.PERMISSION_DENIED: \
    alert("User denied the request for Geolocation API.");
break;
case
error.POSITION_UNAVAILABLE:
alert("USer location information is unavailable.");
break;
case
error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case
error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
} < / script >
      < / body >
          < / html >