Skip to main content

Geolocation Tutorial - Get User Location using Vanilla JS - #92


Published: July 05, 2022 | DevDrawer


Estimated Reading Time
1 minutes
Video Duration
22:21 minutes

If you often use maps on your website, you may be interested in getting the geolocation of your user's location. In this tutorial, we go over how to find the latitude and longitude of your user after asking permission. Once we have those coordinates, we use an open-source map to plot their exact location within a visual interface.

This tutorial uses Leaflet + OpenStreetMap but you can use the same methods to integrate Google maps.

00:00 Intro

01:00 Create Our index.html

02:45 Create Geolocation JS Class

03:30 Create Our Button Click Event

06:45 Proof of Concept

07:29 Add Visible Confirmation

11:47 Add OpenStreetMap + Leaflet

12:18 Add Map Information

17:40 Add Marker

19:36 Final Touches

Download tutorial files here: https://github.com/thedevdrawer/geolocation-using-js

⭐ If you would like to buy me a coffee because I created something that helped you, it would be much appreciated! : https://www.buymeacoffee.com/devdrawer

⭐ Join this channel to get access to perks:

https://www.youtube.com/channel/UCcr8eSk5xCfn3AbYy8WOWzg/join

⭐ Become a Patreon to show support and get exclusive access to content: https://www.patreon.com/devdrawer