https://github.com/wprashed/location-tracking

Getting the user’s address by the tap/click of a button. Yup, that’s easy! The UX is great as it saves the user both the time and effort of filling out some form. It will also save the store owner time, effort, and even money in some cases, as there’ll likely be a reduction in the number of incorrectly placed orders or shipments.
https://github.com/wprashed/location-tracking

geo geo-location google-maps google-maps-api google-maps-javascript-api location

Last synced: about 1 month ago
JSON representation

Getting the user’s address by the tap/click of a button. Yup, that’s easy! The UX is great as it saves the user both the time and effort of filling out some form. It will also save the store owner time, effort, and even money in some cases, as there’ll likely be a reduction in the number of incorrectly placed orders or shipments.

• Host: GitHub
• URL: https://github.com/wprashed/location-tracking
• Owner: wprashed
• Created: 2021-05-23T14:22:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-05-24T06:40:25.000Z (over 3 years ago)
• Last Synced: 2024-10-19T07:53:20.486Z (3 months ago)
• Topics: geo, geo-location, google-maps, google-maps-api, google-maps-javascript-api, location
• Language: HTML
• Homepage:
• Size: 14.6 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Let’s make a form that puts current location to use in a map!

Getting started and setting up

To build this app, we’re going to use the Materialize CSS framework to save us some time fussing with styles. Materialize is a modern responsive front-end framework based on Google’s Material Design system. The beta version works with vanilla JavaScript.

A basic setup using Materialize’s CSS and JavaScript files in a document is like this:

```

  

  

  Address Locator

  

  

  

  

```

We’re also going to use the Google Maps API for displaying the map and getting the user’s human-readable address. We’ll need an API key to do this. Here’s how to get one:

Sign in to your Google Developer’s Console Account

Create a new project or select an existing one

Click on “Enable APIs and Services”

Select the “Maps Javascript API” option

Click “Enable” on the new page that comes up. Go back to the previous page and do a search for “Geocoding API,” click on it and enable it as well

Then, on the right nav of the page, click on Credentials, copy the API key on the page and save it to a file

Now, let’s update our document to show the map and let the user know it can be used to get their current location as the address. Also, we will add a form that’s pre-filled with the address the user selects.

```

  


    
Shipping Address

    
You can click the button below to use your current location as your shipping address

    


    

    Use My Location

    

      


      


      


        

        Address (Area and Street)

      

      


        

        Locality

      

      


        

        City/District/Town

      

      


        

        Pin Code

      

      


        

        Landmark

      

      


        

        State