title: Changing the origin location to the current location
body: <p>I have a google map in my MVC 5 project with origin location and destination location. I need the origin location to be changed to a set address and never change instead of typing the address every time i need to use it.</p>
  
  <p>Its two text fields with origin location and destination location. The origin location i want it to be set to one physical address only.</p>
  
  <p>the following is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head &gt;
      &lt;title&gt;Place Autocomplete&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;style&gt;
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
          height: 10%;
          width:100%;
          padding-top: 800px;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
          height: 10%;
           width:100%;
         
     
        }
        .controls {
           
          margin-top: 10px;
          border: 1px solid transparent;
          border-radius: 2px 0 0 2px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          height: 32px;
          outline: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
  
        #origin-input,
        #destination-input {
         
          background-color: #fff;
          font-family: Roboto;
          font-size: 15px;
          font-weight: 300;
          margin-left: 12px;
          padding: 0 11px 0 13px;
          text-overflow: ellipsis;
          width: 200px;
        }
  
        #origin-input:focus,
        #destination-input:focus {
          border-color: #4d90fe;
        }
  
        #mode-selector {
          color: #fff;
          background-color: #4d90fe;
          margin-left: 12px;
          padding: 5px 11px 0px 11px;
        }
  
        #mode-selector label {
          font-family: Roboto;
          font-size: 13px;
          font-weight: 300;
        }
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input id="origin-input" class="controls" type="text"
              value ="8 Parsia Lane, Tongaat, South Africa" &gt;
  
      &lt;input id="destination-input" class="controls" type="text"
             placeholder="Enter a destination location"&gt;
  
      &lt;div id="mode-selector" class="controls"&gt;
          &lt;input type="radio" name="type" id="changemode-walking" checked="checked"&gt;
          &lt;label for="changemode-walking"&gt;Walking&lt;/label&gt;
  
          &lt;input type="radio" name="type" id="changemode-transit"&gt;
          &lt;label for="changemode-transit"&gt;Transit&lt;/label&gt;
  
          &lt;input type="radio" name="type" id="changemode-driving"&gt;
          &lt;label for="changemode-driving"&gt;Driving&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div id="map"&gt;&lt;/div&gt;
  
      &lt;script&gt;
        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        
  
        function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            mapTypeControl: false,
            center: {lat: -33.8688, lng: 151.2195},
            zoom: 13
          });
  
          new AutocompleteDirectionsHandler(map);
        }
  
       // 
           
       
        function AutocompleteDirectionsHandler(map) {
          this.map = map;
          this.originPlaceId = null;
          this.destinationPlaceId = null;
          this.travelMode = 'WALKING';
          var originInput = document.getElementById('origin-input');
          var destinationInput = document.getElementById('destination-input');
          var modeSelector = document.getElementById('mode-selector');
          this.directionsService = new google.maps.DirectionsService;
          this.directionsDisplay = new google.maps.DirectionsRenderer;
          this.directionsDisplay.setMap(map);
  
          var originAutocomplete = new google.maps.places.Autocomplete(
              originInput, {placeIdOnly: true});
          var destinationAutocomplete = new google.maps.places.Autocomplete(
              destinationInput, {placeIdOnly: true});
  
          this.setupClickListener('changemode-walking', 'WALKING');
          this.setupClickListener('changemode-transit', 'TRANSIT');
          this.setupClickListener('changemode-driving', 'DRIVING');
  
          this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
          this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
  
          this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
          this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
          this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(modeSelector);
        }
  
        // Sets a listener on a radio button to change the filter type on Places
        // Autocomplete.
        AutocompleteDirectionsHandler.prototype.setupClickListener = function(id, mode) {
          var radioButton = document.getElementById(id);
          var me = this;
          radioButton.addEventListener('click', function() {
            me.travelMode = mode;
            me.route();
          });
        };
  
        AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(autocomplete, mode) {
          var me = this;
          autocomplete.bindTo('bounds', this.map);
          autocomplete.addListener('place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.place_id) {
              window.alert("Please select an option from the dropdown list.");
              return;
            }
            if (mode === 'ORIG') {
              me.originPlaceId = place.place_id;
            } else {
              me.destinationPlaceId = place.place_id;
            }
            me.route();
          });
  
        };
  
        AutocompleteDirectionsHandler.prototype.route = function() {
          if (!this.originPlaceId || !this.destinationPlaceId) {
            return;
          }
          var me = this;
  
          this.directionsService.route({
            origin: {'placeId': this.originPlaceId},
            destination: {'placeId': this.destinationPlaceId},
            travelMode: this.travelMode
          }, function(response, status) {
            if (status === 'OK') {
              me.directionsDisplay.setDirections(response);
            } else {
              window.alert('Directions request failed due to ' + status);
            }
          });
        };
  
      &lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcXA5KHYBhOQPuV3ygleDCPu8w2BHq4OY&amp;libraries=places&amp;callback=initMap"
              async defer&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>