Skip to content

anjupriya-v/current-location-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Current Location Tracker

Tech Stacks used:

  • HTML
  • CSS
  • Javascript
  • Firebase
  • Google Maps API

Demo Video 👇

Current.Location.Tracker.mp4

👇Steps to initialize the project:

Clone the repository

$ git clone https://github.com/anjupriya-v/current-location-tracker.git

Redirect to the cloned repo directory

set up the firebase:

  • Redirect to this site Firebase

  • click on add project

  • enter your project name as current-location-tracker and continue

  • This project doesn't requires analytics and disable it and continue

  • Now the project is created

  • This is the web project. so, click on the web icon (</>)

  • Then enter the web app name as current-location-tracker and register it.

  • It shows the npm code for firebase initialization and copy it.Then paste it instead of below code. This code is present in /src/index.js.

image

  • Then click continue to console.

  • In the side menu bar, inside the build option, click on firestore database,

  • Then Click on create database and check on start in production mode and click next.

  • Then provide the cloud firestore location and click on enable.

  • click on start collection and give collection ID as current-location-tracker.

  • Then provide the document id or auto generate it and give the field values if you want or you can give it from frontend.

set up the google map api.

  • Go to this link google map api

  • click on get started and and make sure you have enable the billing for best user experience and work on many features.

  • Once you’ve confirmed your billing is up-to-date, click on the Google Cloud Platform home in upper left corner again.

  • Hover to APIs & Services and go to Credentials.

  • If you want to use an existing project, please select it from the list. Otherwise, select ‘Create a new project’ and enter a project name.

  • Click the Close button in the API key dialogue. Your new API key will be listed on the Credentials page under API keys.

  • Click Create credentials and select API key. You will see a new dialog that displays the newly created API key.

  • for restricting the api key, refer this API restriction

  • Paste the api key instead of YOUR_API_KEY. This code is in /src/Script.js image

Open up the terminal

Install the dependencies

npm install

For running the web pack.

npm run build

Then for starting the project, use the live server in visual studio code.