
I’m sharing a sample code demonstrating how to use the Geolocation API, which is one of the features introduced with HTML5. With this example, you can display the visitor’s current location on a map.
Enjoy using it.
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>My Current Location</title> <style> #map{height: 800px;width: 1500px;} </style> <script src='https://maps.google.com/maps/api/js?sensor=false&key=YOURAPIKEY'></script> <script> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showCurrentLocation); } else { alert('Geolocation API NOT SUPPORTED'); } function showCurrentLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var coords = new google.maps.LatLng(latitude, longitude); var mapOptions = { zoom: 20, center: coords, mapTypeControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map'), mapOptions); var marker = new google.maps.Marker({ position: coords, map: map, title: 'MY CURRENT LOCATION' }); } </script> </head> <body> <div id='map'></div> </body> </html>
Related Articles

Dark Mode with CSS: Theme Switching
0 Comments
Comments ()
No comments yet. Be the first to comment!