Find People's Location through Google Maps

F
Published in: Google Maps - Javascript

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;
  });
});
📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: Google Maps - Javascript

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

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. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account
G

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube