Find People's Location through Google Maps

April 07, 2017

The Where Am I and Postal Address apps using the HTML5 Geolocation service and Google Maps’ Geocoder service to determine your accurate physical location up to the zip code.

The HTML5 geolocation service returns the current longitude and latitude coordinates which are then passed to Google Geocoder for determining the actual geographic location including the street address and the pin code.

This can be used by shopping websites to serve store results that are nearest to the visitor’s current location, by banks for showing the location of nearest ATMs, gas stations and so on.

HTML - We are including the jQuery library and the Google Maps API for geocoding the location.

<html>
  <head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,visualization&sensor=false"></script>
    <a href="#" id="showMyLocation">Where Am I</a>
    <div id="location">Postal Address</div>
    <div id="zipcode">Zip Code</div>
  </body>
</html>

When the user click the Where Am I link, the browser ask for permissions to share his or her location with the website. If they say Allow, the co-ordinates are passed to the Google Maps API for determining the physical address.

$(function () {
  $('#showMyLocation').click(function (event) {
    event.preventDefault();
    $(this).html('Determining address...');
    navigator.geolocation.getCurrentPosition(function (position) {
      var geocoder = new google.maps.Geocoder();
      var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      geocoder.geocode(
        {
          latLng: latLng,
        },
        function (results, status) {
          for (var i = 0; i < results[0].address_components.length; i++) {
            var address = results[0].address_components[i];
            if (address.types[0] == 'postal_code') {
              $('#zipcode').html(address.long_name);
              $('#location').html(results[0].formatted_address);
              $('#showMyLocation').hide();
            }
          }
        }
      );
    });
    return false;
  });
});

Google Maps Javascript

ShareWhatsAppTwitterFacebook

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory