SOLVED - POPULATE FORM ONLOAD FROM GOOGLE MAPS AUTOCOMPLETE

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;amp;libraries=places&amp;.js"></script>
<input id="searchTextField" type="text" size="50"  />  
<input type="text" id="city2" name="city2" />
<input type="text" id="cityLat" name="cityLat" />
<input type="text" id="cityLng" name="cityLng" />

JavaScript

function initialize() {
        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            document.getElementById('city2').value = place.name;
            document.getElementById('cityLat').value = place.geometry.location.lat();
            document.getElementById('cityLng').value = place.geometry.location.lng();

        });
var request = {
  reference: 'CnRtAAAAP2oQGVedOeA5z_XkX0-adnnl4hsGlSJNyuJIVEUeBnkrGcfzDw0z0Ffi7GsZBdYtx-Qmbu6ekzUpZpMwJDVVyNDOKwGsd-V5ff_Y9wN4McpGxLJ_u7reNwwlKOEtkoks4dtcpUcuu7w2hI_j0VtnYhIQtfEq0cHTD1Fl1OeL35pzIhoUE8A3wNPUB1jk5lvueDGqwtVpdbo'
};
service = new google.maps.places.PlacesService(document.body.appendChild(document.createElement('div')));
/* Here I get this Console Error: Uncaught ReferenceError: map is not defined */
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
     autocomplete.set('place',place);
     document.getElementById('searchTextField').value = place.name;
            
  }
}
    }
    google.maps.event.addDomListener(window, 'load', initialize);