ayushshahh / geo-locator

Get your geo-location details with live location on map

Geo-Locator

Get your geo-location details with live position on map.
Check the live site here.

For using this code, check instructions.

Table of Contents

• Site walkthrough
• Brief
• Using the site
• Web App
• Encountering an Error
• Tech-Stack
• APIs used
• External Libraries used
• To-Do List
• Instructions for using this code
• Got some questions?
• Found a bug?
• Contributing
• LICENSE
• Contact

Site Walkthrough

Example of the site made:

Brief

Geo-Locator is a website that will show your geo-location details and a map with your current position.

Information Displayed

• Country: "Your country name"
• Address: "City, Region"
• Postal Code: "Postal code of your city/region"
• IP Address: "Your current IP Address"
• ISP: "Your currrent Internet Service Provider"
• Latitude: "Latitude of your location"
• Longitude: "Longitude of your location"
• Red pin on the map shows your current position.

Using the site

When you open the site, press Allow if it asks for location to display the map and show accurate results.
Keep your location(GPS) on.

Note: The location might be inaccurate sometimes or it may happen that it shows totally wrong coordinates.
But the other information such as Country, ISP and IP will be accurate almost everytime.

Web App

While you can go to the browser everytime for using the website, I would suggest you to use the web app so that you don't have to go to the browser and type in the website everytime. You can directly open the web application on your home screen or the desktop shortcut on your computer to use the website.

Follow the steps:

1. For desktop users

• Chrome
  • Open the website
  • Tap the three dots ⋮ on the top right corner
  • Click on More tools
  • Click on Create shortcut
  • Check Open as window option and click create

2. For mobile users

• Chrome
  • Navigate to the website
  • Tap the three dots ⋮ on the top right corner
  • Scroll down and click on Add to home screen
  • Click Add
• Safari
  • Navigate to the website
  • Click on Share icon at bottom
    (On the iPad, share icon is located at the top-right)
  • Tap Add to home screen from the menu
  • Type name for shortcut and then tap Add button

Now you can use this site as a Web App.
The process might be similar for other browsers too.

Encountering an Error

User denied the request for location.
Click allow to see your location on map.

This comes if you click Deny when asked for location access. Map won't be displayed and coordinates would be inaccurate.

Map is currently unavailable.
Turn on your Location(GPS).

This comes when your location(GPS) is turned off or the application you are using don't have location permission.
Turn on your location(GPS) or go to devices settings > Apps > Navigate to the app and give location permission.

The request for map location timed out.

This comes when the server takes too long to respond to your request, server might be down or your request gets interrupted (you suddenly lose internet connection or gps).

An unknown error occurred.

This comes when something unexpected happens.

Geo-Location is not supported on this browser.

This means that Geo-Location is not supported on the browser you are using. Map will not be displayed and the coordinates shown won't be accurate.

Tech-Stack

Languages used:

1. HTML5
   
2. CSS3
   
3. JavaScript
   

APIs used

Geolocation DB - It is used to get the information of a user's Country and IP Address in JSON format. (Available without location access)

ipinfo.io - It is used to get the information of a user's City, Region, Postal Code, Internet Service Provider (and Latitude/Longitude if a user denied location access) in JSON format. (Available without location access)

HTML Geolocation API - The HTML Geolocation API is used to get the geographical position of a user if they allowed. Here it is used by default to show Latitude and Longitude because it is mostly accurate. (Not available without location access)

Google Maps Embed API - The Maps Embed API lets you place an interactive map on your web page. To make the map dynamic for this website, HTML Geolocation API has been used here to obtain the coordinates of the user and then those coordinates are placed in the map source. (Not available without location access)

External Libraries used

jQuery - jQuery is a JavaScript library. Here it is used for fetching the data in JSON format from APIs and putting those values in html.

PWACompat - PWACompat is a library that brings the Web App Manifest to non-compliant browsers for better Progressive Web Apps.
Read more on their blog.

To-Do List

• Showing proper postal codes
• Adding some more functionality and features

Instructions for using this code

The code won't work directly if you copy this code or clone this repository. If you want to use this code, you will need your own API key and token for the code to work properly.

• Go to ipinfo.io and create your account. You will get your API token there.
• Go through this documentation for creating and using Google Maps API key.

After you get your API key and token, paste them in location.js file inside scripts folder like this:

Google maps API key in:

const map_api = "YOUR_KEY";

and ipinfo token in:

const geoinfo_token = "YOUR_TOKEN";

Now this code will work perfectly.
Note: Paste them in between " " quotes.

---

Never share your token or API with anyone or post it publicly.

Got some questions?

If you got some questions or you want to tell something, you can discuss them in the discussions tab.

Found a bug?

If you find a bug, you can always open an issue in the issues tab to talk about it. Still, if you want to contact me, check here.

---

Note: Make sure you browse through the existing issues to check if the issue already exists.

Know a fix or want to contribute? Check contributions section.

Contributing

Pull requests are always welcome. But before making any major changes you can open an issue to discuss.
For less major or minor changes, you can open a pull request.

Make sure you see the instructions for using this code.

Thanks for contributing.

LICENSE 🛡️

This project is licensed under the MIT License - see the LICENSE file for details.

Contact

I don't like spams

       

Back to top