How to use HTML5 GeoLocation API with Google Maps?

HTMLWeb DevelopmentFront End Technology

HTML5 Geolocation API lets you share your location with your favorite websites. A Javascript can capture your latitude and longitude and can be sent to backend web server and do fancy location-aware things like finding local businesses or showing your location on a map. The geolocation coordinates specify the geographic location of the device.

We will be using getCurrentPostion() method to get the current location. To get current location using HTML5 Geolocation with Google Maps, you need to set an API key for Google Static Maps API.

Go to https://console.developers.google.com and get a free API key for Google Map. Add this key to the code to work Geolocation with it.

You can try to run the following code to show current location using HTML5 Geolocation with Google Maps −

Example

<!DOCTYPE HTML>
<html>
   <head>
      <script type = "text/javascript">
         function showLocation(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var latlongvalue = position.coords.latitude + ","
                              + position.coords.longitude;
            var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
                          +latlongvalue+"&zoom=14&size = 400x300&key =
                          AIzaSyAa8HeLH2lQMbPeOiMlM9D1VxZ7pbGQq8o";
            document.getElementById("mapholder").innerHTML =
            "<img src ='"+img_url+"'>";
         }
         function errorHandler(err) {
            if(err.code == 1) {
               alert("Error: Access is denied!");
            }else if( err.code == 2) {
               alert("Error: Position is unavailable!");
            }
         }
         function getLocation(){
            if(navigator.geolocation){
               // timeout at 60000 milliseconds (60 seconds)
               var options = {timeout:60000};
               navigator.geolocation.getCurrentPosition
               (showLocation, errorHandler, options);
            }else{
               alert("Sorry, browser does not support geolocation!");
            }
         }
      </script>
   </head>
   <body>
      <div id="mapholder"></div>
      <form>
         <input type="button" onclick="getLocation();" value="Your Location"/>
      </form>
   </body>
</html>
raja
Published on 07-Feb-2018 12:56:26
Advertisements