title: Uncaught ReferenceError: geolocate is not defined
body: <p>I could not find a solution for my situation on the Internet, so I ask for your help.</p>
  
  <p>Trying to use the Google Address auto-complete API. I using asp.net core.
  In razor i have:</p>
  
  <pre><code>@section Scripts{
  
  &lt;script src="~/scripts/common/google-location.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=[Placed my key]&amp;libraries=places"
      async defer&gt;&lt;/script&gt;
  }
  &lt;div id="subConstractorsModal" class="modal fade" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-12"&gt;
                      &lt;div class="form-group modal-errors"&gt;
                          &lt;div class="alert alert-danger"&gt;
                              &lt;strong&gt;Error!&lt;/strong&gt;
                              &lt;ul&gt;&lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row  default-row"&gt;
                  &lt;div class="col-md-6 name-box top-left"&gt;
                      &lt;label class="control-label"&gt;Name&lt;/label&gt;
                      &lt;div&gt;
                          &lt;input type="text" placeholder="Name" class="form-control input-sm"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6 is-active-box top-right"&gt;
                      &lt;label class="control-label"&gt;Active&lt;/label&gt;
                      &lt;div&gt;
                          &lt;input type="checkbox" class="form-control input-sm"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;br /&gt;
              &lt;div class="row  default-row"&gt;
                  &lt;div class="form-group col-md-12"&gt;
                      &lt;div id="locationField"&gt;
                          &lt;label&gt;Address:&lt;/label&gt;
                          &lt;input class="form-control input-sm" id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row  default-row"&gt;
                  &lt;div class="form-group col-md-1"&gt;
                      &lt;label&gt;Street Number:&lt;/label&gt;
                      &lt;input class="form-control input-sm" id="street_number" readonly /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-2"&gt;
                      &lt;label&gt;Street:&lt;/label&gt;
                      &lt;input class="form-control input-sm" id="route" readonly /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-2"&gt;
                      &lt;label&gt;City:&lt;/label&gt;
                      &lt;input class="form-control input-sm" id="locality" readonly /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-2"&gt;
                      &lt;label&gt;State:&lt;/label&gt;
                      &lt;input class="form-control input-sm" id="administrative_area_level_1" readonly /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-2"&gt;
                      &lt;label&gt;Post code:&lt;/label&gt;
                      &lt;input class="form-control input-sm" id="postal_code" readonly /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-2"&gt;
                      &lt;label&gt;Country:&lt;/label&gt;
                      &lt;input class="form-control input-sm" id="country" readonly /&gt;
                  &lt;/div&gt;
                  &lt;input type="hidden" id="longitude" /&gt;
                  &lt;input type="hidden" id="lattitude" /&gt;
              &lt;/div&gt;
  
  
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>In my js file i have this code:</p>
  
  <pre><code>$(function() {
  
      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(
              (document.getElementById('autocomplete')), {
                  types: ['geocode']
              });
  
          // When the user selects an address from the dropdown, populate the address
          // fields in the form.
          autocomplete.addListener('place_changed', fillInAddress);
      }
  
      function fillInAddress() {
          // Get the place details from the autocomplete object.
          var place = autocomplete.getPlace();
  
          for (var component in componentForm) {
              document.getElementById(component).value = '';
              //document.getElementById(component).disabled = false;
              $("#" + component).prop('readonly', false);
          }
  
          var location = place.geometry.location;
          var lattitude = location.lat();
          var longitude = location.lng();
          $("#lattitude").val(parseFloat(lattitude.toFixed(8)));
          $("#longitude").val(parseFloat(longitude.toFixed(8)));
  
  
          // Get each component of the address from the place details
          // and fill the corresponding field on the form.
          for (var i = 0; i &lt; 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;
              }
          }
      }
  
      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
          if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                  var geolocation = {
                      lat: position.coords.latitude,
                      lng: position.coords.longitude
                  };
                  var circle = new google.maps.Circle({
                      center: geolocation,
                      radius: position.coords.accuracy
                  });
                  //autocomplete.setBounds(circle.getBounds());
              });
          }
      }
  });
  </code></pre>
  
  <p>And i have this error: <code>Uncaught ReferenceError: geolocate is not defined</code></p>