address autocomplete

<?php

$city = 'Alpharetta';
$region = 'GA (Georgia)';
$zipcode = '30022';

$city2 = 'Stony Point';
$region2 = 'NY (New York)';
$zipcode2 = '10980';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable = no">
    <meta charset="utf-8">
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDcy8ewVLI6L_YrdhgmpTP7T-yDekbcCek&signed_in=true&libraries=places&callback=initAutocomplete" async defer></script>
  </head>
  <body>
    <div class="itinerary_fields">
        <p><label>Exact Address:</label>  <span class="locationField"><input style="width: 500px;" class="address_autocomplete" id="autocomplete" placeholder="Enter your address"
             onFocus="geolocate(<?=$zipcode?>);" type="text"></input></span>, <span class="address"><?=$city?>, <?=$region?>, <?=$zipcode?></span></p>
        <p><label class="textfield">Notes:</label><textarea placeholder="Optional Location Description"></textarea></p>

        <!-- <p><label>Exact Address:</label>  <span id="locationField"><input style="width: 500px;" class="address_autocomplete" placeholder="Enter your address"
             onFocus="geolocate(<?=$zipcode2?>);" type="text"></input></span>, <span class="address"><?=$city2?>, <?=$region2?>, <?=$zipcode2?></span></p>
        <p><label class="textfield">Notes:</label><textarea placeholder="Optional Location Description"></textarea></p> -->
    </div>

     <script>

        var autocomplete;

        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: ['geocode'],
                componentRestrictions: {
                    country: 'us'
                }
              });
        }

        // [START region_geolocation]
        // Bias the autocomplete object to the user's geographical location,
        // as supplied by the browser's 'navigator.geolocation' object.
        function geolocate(zipcode) {
            var geocoder = new google.maps.Geocoder;

            geocoder.geocode({
                'address': String(zipcode)
            }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    var circle = new google.maps.Circle({
                        center: results[0].geometry.location,
                        radius: 50000 //in meters
                    });

                    autocomplete.setBounds(circle.getBounds());
                }
            });
        }
        // [END region_geolocation]

    </script>
</body>
</html>