Google is providing a code to get user's current Geo location by using google's api. This is very simple code, you can customize it as you need, this will helps to getcurrentlocation, getcurrentposition of the customer or user of our website or application. let see the code and example.
TRY IN DIFFERENT BROWSERS
NOTE : This getcurrentlocation and getcurrentposition will not work in chrome or chromium, if it is HTTPS enabled website, then only it will work, other then that this will work in EDGE, Internet explorer Mozilla firefox, safari like that kind of browsers it will work.
HTML CODE
<!DOCTYPE html> <html> <head> <title>Geolocation</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> // Note: This example requires that you consent to location sharing when // prompted by your browser. If you see the error "The Geolocation service // failed.", it means you probably did not give permission for the browser to // locate you. function initMap() { var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 12.9716, lng: 77.5946}, zoom: 6 }); var infoWindow = new google.maps.InfoWindow({map: map}); // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infoWindow.setPosition(pos); infoWindow.setContent('Location found.'); map.setCenter(pos); }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\'t support geolocation.'); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=--APIKEY--&callback=initMap"> </script> </body> </html>
After that your location will be shared, and you can see where are you exactly.
I hope this post will be helpful to you, In next post i will explain you how to create API KEY for Google Maps. Thanks for visiting. Keep in touch with us.
getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
SOLUTION :
This will work only in HTTPS enabled websites like https://2my4edge.com, This will not work in http://2my4edge.com. Secure socket layer should be enabled. this will not work only in chrome and chromeium browser.
fantastic points altogether, you just won a logo new reader.
ReplyDeleteWhat may you recommend in regards to your submit that you simply made
a few days in the past? Anyy certain?