Plot Address Into Field

Use HTML5 Geolocation to find coordinates, then geocode them into addresses via Google Maps API. Set results as values in input fields.

by Lee Whitworth

HTML

<script src="https://maps.google.com/maps/api/js?key=&amp;language=en"></script>
<div class="portlet solid bordered light-grey panel-group accordion" id="search_outer">

  <div class="portlet-title" style="margin-bottom:-10px;">
    <div class="caption">
      <h1 class="page-title"><i class="icon-search"></i> Plot Address <small></small></h1>
    </div>
    <!-- end caption -->
  </div>
  <!-- end portlet-title -->

  <div class="panel-collapse collapse{if segment_3}{if:else} in{/if}" id="search_box">
    <div class="portlet-body" id="search_box">

        <div class="form-body">
          <div class="row">

            <div class="form-group col-md-6 col-sm-6">
              <label class="control-label">Your Location</label>
              <div class="input-icon">
                <i class="icon-map-marker"></i>
                <input type="text" id="location-address" name="location" class="form-control" placeholder="Some place..." value="">
              </div>
              <span class="help-block">Enter some location specifics.</span>
            </div>
            <!-- end form-group -->

            <div class="form-group col-md-6 col-sm-6">
              <label class="control-label">Coordinates</label>
              <div class="input-icon">
                <i class="icon-map-marker"></i>
                <input type="text" id="location-lat-long" name="location-lat-long" class="form-control" placeholder="Coordinates" value="" readonly="readonly">
              </div>
              <span class="help-block">Your geolocated coordinates.</span>
            </div>
            <!-- end form-group -->
            
            <div class="form-group col-md-6 col-sm-6">
              <label class="control-label">Accuracy</label>
              <div class="input-icon">
                <i class="icon-map-marker"></i>
                <input type="text" id="location-accuracy" name="location-accuracy" class="form-control" placeholder="Accuracy" value=""...

JavaScript

"use strict";
$(document).ready(function() {

  // get location button functionality
  $("#get-location-btn").click(function(event) {
    event.preventDefault();
    $("#location-lat-long").val("Finding your coordinates...");
    $("#location-lat-long").val("Pinging your device...");
    // check if browser supports the geolocation api
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(success); // if geolocation supported, call function
    } else {
      $("#location-lat-long").val('Your browser doesn\'t support the geolocation api.');
    }

  });

  // function to get lat/long 
  function success(position) {
  
    var latitude = position.coords.latitude; // set latitude variable
    var longitude = position.coords.longitude; // set longitude variable
    var accuracy	= position.coords.accuracy; // set accuracy variable
    
    var latLongResponse = latitude + ', ' + longitude; // build string containing lat/long
    var accuracyResponse = accuracy + ' feet'; // add feet to accuracy value in string
    
    $("#location-lat-long").val(latLongResponse); // write lat/long string to input field
    $("#location-accuracy").val(accuracyResponse); // write accuracy string to input field
    getAddress(latitude, longitude); // geocode the lat/long into an address
  }

  // function to process address data
  function processAddress(address) {
    $("#location-address").val(address); // write address to field
  }

  // function to geocode a lat/long
  function getAddress(myLatitude, myLongitude) {

    var geocoder = new google.maps.Geocoder(); // create a geocoder object
    var location = new google.maps.LatLng(myLatitude, myLongitude); // turn coordinates into an object

    geocoder.geocode({
      'latLng': location
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) { // if geocode success
        processAddress(results[0].formatted_address); // if address found, pass to processing function
      }...