arvilmena/index.php

## index.php
<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete Address Form</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>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <style>
      #locationField, #controls {
        position: relative;
        width: 480px;
      }
      #autocomplete {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 99%;
      }
      .label {
        text-align: right;
        font-weight: bold;
        width: 100px;
        color: #303030;
      }
      #address {
        border: 1px solid #000090;
        background-color: #f0f0ff;
        width: 480px;
        padding-right: 2px;
      }
      #address td {
        font-size: 10pt;
      }
      .field {
        width: 99%;
      }
      .slimField {
        width: 80px;
      }
      .wideField {
        width: 200px;
      }
      #locationField {
        height: 20px;
        margin-bottom: 2px;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
  </head>

  <body>

    <form action="" autocomplete="off">
    <div id="locationField">
      <input id="autocomplete" placeholder="Enter your address" type="text"></input>
    </div>
    </form>

    <table id="address">
      <tr>
        <td class="label">Street address</td>
        <td class="slimField"><input class="field" id="street_number"
              disabled="true"></input></td>
        <td class="wideField" colspan="2"><input class="field" id="route"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">City</td>
        <!-- Note: Selection of address components in this example is typical.
             You may need to adjust it for the locations relevant to your app. See
             https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
        -->
        <td class="wideField" colspan="3"><input class="field" id="locality"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>
        <td class="label">Zip code</td>
        <td class="wideField"><input class="field" id="postal_code"
              disabled="true"></input></td>
      </tr>
      <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3"><input class="field"
              id="country" disabled="true"></input></td>
      </tr>
    </table>

    <script>
      // This example displays an address form, using the autocomplete feature
      // of the Google Places API to help users fill in the information.

      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

      var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['(cities)']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', handlePlaceChange);
      }

      function handlePlaceChange() {
        removeFocus();
        fillInAddress();
      }
      function removeFocus() {
        $('#autocomplete').blur();
      }
      function clearFields() {
        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();
        console.log("place", place);

        clearFields();

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuTA84COJ8auSXhy1zBjeLdeOzAY_TXsc&libraries=places&callback=initAutocomplete" async defer>
      </script>
  </body>
</html>

## select2.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body {
    background: #20262E;
    }

    #container {
    background: #fff;
    margin: 20px auto 0 auto;
    width: 400px;
    padding: 10px 20px 20px 20px;
    border-radius: 4px;
    }

    #container h2 {
    font-size: 25px;
    text-align: center;
    }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuTA84COJ8auSXhy1zBjeLdeOzAY_TXsc&libraries=places"></script>
</head>
<body>
<div id="container">
  <h2>Search for something</h2>
  <select class="adress-autocomplete"></select>
</div>
</body>
<script>
$.fn.select2.amd.define('select2/data/googleAutocompleteAdapter', ['select2/data/array', 'select2/utils'],
    function (ArrayAdapter, Utils) {
        function GoogleAutocompleteDataAdapter ($element, options) {
            GoogleAutocompleteDataAdapter.__super__.constructor.call(this, $element, options);
        }

        Utils.Extend(GoogleAutocompleteDataAdapter, ArrayAdapter);

        GoogleAutocompleteDataAdapter.prototype.query = function (params, callback) {
            var returnSuggestions = function(predictions, status)
            {
                var data = {results: []};
                if (status != google.maps.places.PlacesServiceStatus.OK) {
                    callback(data);
                }
                for(var i = 0; i< predictions.length; i++)
                {
                    console.log(predictions[i]);
                    data.results.push({
                        id: predictions[i].place_id.toString(),
                        text: predictions[i].description.toString()
                    });
                }
                data.results.push({id:' ', text: 'Powered by Google', disabled: true});
                // console.log(data);
                callback(data);
            };

            if(params.term && params.term != '')
            {
                var service = new google.maps.places.AutocompleteService();
                service.getPlacePredictions({ input: params.term, types: ['(cities)'] }, returnSuggestions);
            }
            else
            {
                var data = {results: []};
                data.results.push({id:' ', text: 'Powered by Google', disabled: true});
                callback(data);
            }
        };
        return GoogleAutocompleteDataAdapter;
    }
);
function formatRepo (repo) {
  if (repo.loading) {
    return repo.text;
  }

  var markup = "<div class='select2-result-repository clearfix'>" +
      "<div class='select2-result-title'>" + repo.text + "</div>";
  return markup;
}

function formatRepoSelection (repo) {
 	return repo.text;
}

var googleAutocompleteAdapter = $.fn.select2.amd.require('select2/data/googleAutocompleteAdapter');

var $select = $('.adress-autocomplete');
$select.select2({
	width: '100%',
    dataAdapter: googleAutocompleteAdapter,
    placeholder: 'Search Adress',
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 2,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
});
$select.on("select2:select", function(event) {
  var value = $(event.currentTarget).find("option:selected").val();
  console.log(value);
  getDetails(value);
});

function getDetails( place_id ) {
    var geocoder = new google.maps.Geocoder;

    geocoder.geocode({'placeId': place_id}, function(results, status) {
        if (status === 'OK') {
        if (results[0]) {
            extractComponents(results[0]);
        } else {
            window.alert('No results found');
        }
        } else {
        window.alert('Geocoder failed due to: ' + status);
        }
    });
}

function extractComponents( geocode_result ) {
    console.log(geocode_result);
    var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
    };
    var response = {
        google_place_id: geocode_result.place_id,
        formatted_address: geocode_result.formatted_address,
        city: '',
        state: '',
        country: '',
        postal_code: '',
        lat: geocode_result.geometry.location.lat(),
        lng: geocode_result.geometry.location.lng()
    }
    for (var i = 0; i < geocode_result.address_components.length; i++) {
        var addressType = geocode_result.address_components[i].types[0];
        if (componentForm[addressType]) {
        var val = geocode_result.address_components[i][componentForm[addressType]];
            console.log( addressType, val );
            if ( addressType === 'locality' ) {
                response.city = val;
            } else if ( addressType === 'administrative_area_level_1' ) {
                response.state = val;
            } else if ( addressType === 'country' ) {
                response.country = val;
            } else if ( addressType === 'postal_code' ) {
                response.postal_code = val;
            }
        }
    }
    console.log(response);
    return response;
}
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Place Autocomplete Address Form</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>
	<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
	<style>
	#locationField, #controls {
	position: relative;
	width: 480px;
	}
	#autocomplete {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 99%;
	}
	.label {
	text-align: right;
	font-weight: bold;
	width: 100px;
	color: #303030;
	}
	#address {
	border: 1px solid #000090;
	background-color: #f0f0ff;
	width: 480px;
	padding-right: 2px;
	}
	#address td {
	font-size: 10pt;
	}
	.field {
	width: 99%;
	}
	.slimField {
	width: 80px;
	}
	.wideField {
	width: 200px;
	}
	#locationField {
	height: 20px;
	margin-bottom: 2px;
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
	</head>

	<body>

	<form action="" autocomplete="off">
	<div id="locationField">
	<input id="autocomplete" placeholder="Enter your address" type="text"></input>
	</div>
	</form>

	<table id="address">
	<tr>
	<td class="label">Street address</td>
	<td class="slimField"><input class="field" id="street_number"
	disabled="true"></input></td>
	<td class="wideField" colspan="2"><input class="field" id="route"
	disabled="true"></input></td>
	</tr>
	<tr>
	<td class="label">City</td>
	<!-- Note: Selection of address components in this example is typical.
	You may need to adjust it for the locations relevant to your app. See
	https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
	-->
	<td class="wideField" colspan="3"><input class="field" id="locality"
	disabled="true"></input></td>
	</tr>
	<tr>
	<td class="label">State</td>
	<td class="slimField"><input class="field"
	id="administrative_area_level_1" disabled="true"></input></td>
	<td class="label">Zip code</td>
	<td class="wideField"><input class="field" id="postal_code"
	disabled="true"></input></td>
	</tr>
	<tr>
	<td class="label">Country</td>
	<td class="wideField" colspan="3"><input class="field"
	id="country" disabled="true"></input></td>
	</tr>
	</table>

	<script>
	// This example displays an address form, using the autocomplete feature
	// of the Google Places API to help users fill in the information.

	// This example requires the Places library. Include the libraries=places
	// parameter when you first load the API. For example:
	// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

	var placeSearch, autocomplete;
	var componentForm = {
	street_number: 'short_name',
	route: 'long_name',
	locality: 'long_name',
	administrative_area_level_1: 'short_name',
	country: 'long_name',
	postal_code: 'short_name'
	};

	function initAutocomplete() {
	// Create the autocomplete object, restricting the search to geographical
	// location types.
	autocomplete = new google.maps.places.Autocomplete(
	/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
	{types: ['(cities)']});

	// When the user selects an address from the dropdown, populate the address
	// fields in the form.
	autocomplete.addListener('place_changed', handlePlaceChange);
	}

	function handlePlaceChange() {
	removeFocus();
	fillInAddress();
	}
	function removeFocus() {
	$('#autocomplete').blur();
	}
	function clearFields() {
	for (var component in componentForm) {
	document.getElementById(component).value = '';
	document.getElementById(component).disabled = false;
	}
	}

	function fillInAddress() {
	// Get the place details from the autocomplete object.
	var place = autocomplete.getPlace();
	console.log("place", place);

	clearFields();

	// Get each component of the address from the place details
	// and fill the corresponding field on the form.
	for (var i = 0; i < place.address_components.length; i++) {
	var addressType = place.address_components[i].types[0];
	if (componentForm[addressType]) {
	var val = place.address_components[i][componentForm[addressType]];
	document.getElementById(addressType).value = val;
	}
	}
	}
	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuTA84COJ8auSXhy1zBjeLdeOzAY_TXsc&libraries=places&callback=initAutocomplete" async defer>
	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	body {
	background: #20262E;
	}

	#container {
	background: #fff;
	margin: 20px auto 0 auto;
	width: 400px;
	padding: 10px 20px 20px 20px;
	border-radius: 4px;
	}

	#container h2 {
	font-size: 25px;
	text-align: center;
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuTA84COJ8auSXhy1zBjeLdeOzAY_TXsc&libraries=places"></script>
	</head>
	<body>
	<div id="container">
	<h2>Search for something</h2>
	<select class="adress-autocomplete"></select>
	</div>
	</body>
	<script>
	$.fn.select2.amd.define('select2/data/googleAutocompleteAdapter', ['select2/data/array', 'select2/utils'],
	function (ArrayAdapter, Utils) {
	function GoogleAutocompleteDataAdapter ($element, options) {
	GoogleAutocompleteDataAdapter.__super__.constructor.call(this, $element, options);
	}

	Utils.Extend(GoogleAutocompleteDataAdapter, ArrayAdapter);

	GoogleAutocompleteDataAdapter.prototype.query = function (params, callback) {
	var returnSuggestions = function(predictions, status)
	{
	var data = {results: []};
	if (status != google.maps.places.PlacesServiceStatus.OK) {
	callback(data);
	}
	for(var i = 0; i< predictions.length; i++)
	{
	console.log(predictions[i]);
	data.results.push({
	id: predictions[i].place_id.toString(),
	text: predictions[i].description.toString()
	});
	}
	data.results.push({id:' ', text: 'Powered by Google', disabled: true});
	// console.log(data);
	callback(data);
	};

	if(params.term && params.term != '')
	{
	var service = new google.maps.places.AutocompleteService();
	service.getPlacePredictions({ input: params.term, types: ['(cities)'] }, returnSuggestions);
	}
	else
	{
	var data = {results: []};
	data.results.push({id:' ', text: 'Powered by Google', disabled: true});
	callback(data);
	}
	};
	return GoogleAutocompleteDataAdapter;
	}
	);
	function formatRepo (repo) {
	if (repo.loading) {
	return repo.text;
	}

	var markup = "<div class='select2-result-repository clearfix'>" +
	"<div class='select2-result-title'>" + repo.text + "</div>";
	return markup;
	}

	function formatRepoSelection (repo) {
	return repo.text;
	}

	var googleAutocompleteAdapter = $.fn.select2.amd.require('select2/data/googleAutocompleteAdapter');

	var $select = $('.adress-autocomplete');
	$select.select2({
	width: '100%',
	dataAdapter: googleAutocompleteAdapter,
	placeholder: 'Search Adress',
	escapeMarkup: function (markup) { return markup; },
	minimumInputLength: 2,
	templateResult: formatRepo,
	templateSelection: formatRepoSelection
	});
	$select.on("select2:select", function(event) {
	var value = $(event.currentTarget).find("option:selected").val();
	console.log(value);
	getDetails(value);
	});

	function getDetails( place_id ) {
	var geocoder = new google.maps.Geocoder;

	geocoder.geocode({'placeId': place_id}, function(results, status) {
	if (status === 'OK') {
	if (results[0]) {
	extractComponents(results[0]);
	} else {
	window.alert('No results found');
	}
	} else {
	window.alert('Geocoder failed due to: ' + status);
	}
	});
	}

	function extractComponents( geocode_result ) {
	console.log(geocode_result);
	var componentForm = {
	street_number: 'short_name',
	route: 'long_name',
	locality: 'long_name',
	administrative_area_level_1: 'short_name',
	country: 'long_name',
	postal_code: 'short_name'
	};
	var response = {
	google_place_id: geocode_result.place_id,
	formatted_address: geocode_result.formatted_address,
	city: '',
	state: '',
	country: '',
	postal_code: '',
	lat: geocode_result.geometry.location.lat(),
	lng: geocode_result.geometry.location.lng()
	}
	for (var i = 0; i < geocode_result.address_components.length; i++) {
	var addressType = geocode_result.address_components[i].types[0];
	if (componentForm[addressType]) {
	var val = geocode_result.address_components[i][componentForm[addressType]];
	console.log( addressType, val );
	if ( addressType === 'locality' ) {
	response.city = val;
	} else if ( addressType === 'administrative_area_level_1' ) {
	response.state = val;
	} else if ( addressType === 'country' ) {
	response.country = val;
	} else if ( addressType === 'postal_code' ) {
	response.postal_code = val;
	}
	}
	}
	console.log(response);
	return response;
	}
	</script>
	</html>