Usando Google place autocomplete con Google Maps

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;amp;sensor=false&amp;amp;libraries=places"></script>
<form action="javascript:void(0);" name="form1" id="form1">
    <input type="text" name="location" class="textbox" id="location" value="" />
    <input type="submit" value="Submit" class="submit" />
</form>
<div id="map-canvas"></div>

<table id="address">
    <tr>
        <td class="label">Street address</td>
        <td class="slimField">
            <input class="field" id="street_number"></input>
        </td>
        <td class="wideField" colspan="2">
            <input class="field" id="route"></input>
        </td>
    </tr>
    <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3">
            <input class="field" id="locality"></input>
        </td>
    </tr>
    <tr>
        <td class="label">State</td>
        <td class="slimField">
            <input class="field" id="administrative_area_level_1"></input>
        </td>
        <td class="label">Zip code</td>
        <td class="wideField">
            <input class="field" id="postal_code"></input>
        </td>
    </tr>
    <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3">
            <input class="field" id="country"></input>
        </td>
    </tr>
    <tr>
        <td class="label">Lat</td>
        <td class="slimField">
            <input type="text" class="field" id="latitude"></input>
        </td>
        <td class="label">Long</td>
        <td class="wideField">
            <input type="text" class="field" id="longitude"></input>
        </td>
    </tr>
</table>

CSS

#map-canvas{
    height: 350px;
    width: 350px;
}

JavaScript

//Autocomplete variables
    var input = document.getElementById('location');
    var searchform = document.getElementById('form1');
    var place;
    var autocomplete = new google.maps.places.Autocomplete(input);
 
    //Google Map variables
    var map;
    var marker;
    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'
    };
    //Add listener to detect autocomplete selection
    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        place = autocomplete.getPlace();
         fillInAddress();
        //console.log(place);
    });
 
    //Add listener to search
    searchform.addEventListener("submit", function() {
        var newlatlong = new google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng());
        map.setCenter(newlatlong);
        marker.setPosition(newlatlong);
        map.setZoom(12);
        
 
    });
     
    //Reset the inpout box on click
    input.addEventListener('click', function(){
        input.value = "";
    });
  
    function initialize() {
      var myLatlng = new google.maps.LatLng(51.517503,-0.133896);
      var mapOptions = {
        zoom: 1,
        center: myLatlng
      }
      var mapElem = document.getElementById('map-canvas');
      map = new google.maps.Map(mapElem, mapOptions);
        
        console.log("map: ", map, " Element: ", mapElem);
        
      marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Main map'
      });
    }
 // [START region_fillform]
function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    document.getElementById("latitude").value = place.geometry.location.lat();
   ...