Coders Packet

HTML Location Detector using Google API

By Srihariharasudhan V,

This project finds the current location of the user with the help of google maps.It can be embedded for big projects where location detector is needed. It uses google maps library.

BEFORE DETECTING:

 

AFTER DETECTING:

 

CODE EXPLANATION:

HTML:

div class = "gfg" font color="black" CURRENT LOCATION /div
p font color="green">Display location in map /p
button class= "geeks" type="button" onclick="getlocation();">
Current Position
div id="demo2" style="width: 500px; height: 500px;" /center

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


the above code imports google maps libarary.
the current location is the text that will appear on top. And a button is created to get the current position.
the center script tag where the google offers the maps instead of individually creating an API key and using it.

JAVASCRIPT:

function getlocation()
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(showLoc, errHand);

When the user clicks current location it comes to this function and gets the location. This function gets the current position withs showloc and errHand.

 

function showLoc(pos)
latt = pos.coords.latitude;
long = pos.coords.longitude;
var lattlong = new google.maps.LatLng(latt, long);
var OPTions = {
center: lattlong,
zoom: 10,
mapTypeControl: true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL}

var mapg = new google.maps.Map(document.getElementById("demo2"), OPTions);
var markerg =
new google.maps.Marker({position:lattlong, map:mapg, title:"You are here!"});

When the user clicks current location it will ask user's permission to access location and it gets the latitude and longitude via this showloc function. And the marker is to mark the position and indicate you are here once the location is detected.

function errHand(err)
switch(err.code)
case err.PERMISSION_DENIED:
result.innerHTML = "The application doesn't have the permission" +
"to make use of location services"
break;
case err.POSITION_UNAVAILABLE:
result.innerHTML = "The location of the device is uncertain"
break;
case err.TIMEOUT:
result.innerHTML = "The request to get user location timed out"
break;
case err.UNKNOWN_ERROR:
result.innerHTML = "Time to fetch location information exceeded"+
"the maximum timeout interval"
break;
There are some possibilities for the occurence of some errors. Those errors are handled here.


CSS:
.gfg
font-size:40px;
font-weight:bold;
color:#009900;
margin-left:20px;

.geeks
margin-left:150px;

p
font-size:20px;
margin-left:20px;


gfg is the class name for the div tag of Current location text. the font size and other parameters are set for that tag.
geeks is the class name for button tag and the button appears about 150px from left.
p tag is the parapgraph tag which displays display location in map text and the font size and margin left parameters have been set for that.

 

 

Download Complete Code

Comments

No comments yet