April 30, 2025 - 18:24
Geolocation API Example Image
HTML5 & CSS3

Geolocation API Example

Comments

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

Comments ()

No comments yet. Be the first to comment!

Leave a Comment