Get LatLng in Google Maps Places Autocomplete

by Roger Sanchez

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<!-- CHECK ELEMENT ID also UPDATE CSS -->Please fill in:
<input id="searchTextField" type="text" size="50">
<div id="map_canvas"></div>
<div ng-controller="Ctrl">
    <input id="lat" type="text" />
    <input id="lng" type="text" />
</div>

CSS

html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%
}

JavaScript

function initialize() {
          var mapOptions = {
              center: new google.maps.LatLng(-33.8688, 151.2195),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);

          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);

          autocomplete.bindTo('bounds', map);

          var infowindow = new google.maps.InfoWindow();
          var marker = new google.maps.Marker({
              map: map
          });

          google.maps.event.addListener(autocomplete, 'place_changed', function () {
              infowindow.close();
              var place = autocomplete.getPlace();

              if (place.geometry.viewport) {
                  map.fitBounds(place.geometry.viewport);
              } else {
                  map.setCenter(place.geometry.location);
                  map.setZoom(17); // Why 17? Because it looks good.
              }

              var image = new google.maps.MarkerImage(
              place.icon,
              new google.maps.Size(71, 71),
              new google.maps.Point(0, 0),
              new google.maps.Point(17, 34),
              new google.maps.Size(35, 35));
              marker.setIcon(image);
              marker.setPosition(place.geometry.location);

              var address = '';
              if (place.address_components) {
                  address = [(place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')].join(' ');
              }

              updateTextFields(place.geometry.location.lat(),place.geometry.location.lng());

              infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +...