Get User Current Location Using Google Map API Script

Introduction:

We know that Google Map is amazing. Today many companies are improving their business with Google Map. It allows businesses to list their business on the map and people can find their store efficiently. Today through this article I am going to introduce an API that will allow you to get the current location of the user who visits your site. 

Why I Need This API:

You can use this API to improve your website. A site like E-Commerce may have offers for different country and location. So by using this API you can find the user location and filter the result as per the country and area. 

You can use the API to save the visitor stat info and improve your website services. By this, you can find out from where more visitors are coming to your site.

Demo Click here Download Click here

Let's Workout The Tutorial:

It is very easy to implement the GEO Location find API on your website. Here I am going to show you an example of it. You can customize the script as per you like to be. Just copy the script below and paste it on a Html Page.
<!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: -34.397, lng: 150.644},
          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=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>
The above code will allow you to find the user location very easy. All you want to do that, Replace API Key with yours. You can get your API Key from Google Developer Console.

How to Get Own API from Google Console:

It is very easy to get own API Key. All you need to do the following steps. Without API, you can't get the location of the user. 
  • Go to: https://console.developers.google.com/ 
  • Click on the "Enable API". 
  • There you can see "Google Map's API" Under it "Google Map Javascript API" Click on it.
  • Enable the API and get the API Key from "Credential" That you can see a "Key" Symbol at the left side. 
  • Copy the API Key and replace the "YOUR_API_KEY" With the key.
  • You are done.
Now open the page and click on the "Share Location" That popup at the left side of the browser. The script will show the current location via the API Key.

Suggested Link for Developers: 

I hope you well enjoyed this article. If you have any doubts in this article. Please let me know by using the comment box that given below. Thanks

0 comments:

Post a Comment

Wapmaster or Webmaster can Comment Us with the following Comment Box . Don't add Links to your site for Spamming our Blog .. Once you add Comment with Link . It will be deleted immediatly by our Admins .

 
Top