Get user's current location and current position using google map API | 2my4edge

08 March 2017

Get user's current location and current position using google map API

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.

Google map aoi getcurrent location
TRY IN DIFFERENT BROWSERS

SOURCE                         OUR DEMO                   GOOGLE DEMO

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 running this code you will get a screen like this the below image, Click ALLOW in that,

Google map aoi getcurrent location allow notification

After that your location will be shared, and you can see where are you exactly.

Location map using google api

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.

No comments:

Post a Comment

^