title: Google Maps - Geocoding with Draggable marks and search box
body: <p>I'm new here and <strong>i'm starting now with API code</strong></p>
  
  <p>I'm trying to improve the code I've created.
  <strong>I have a window where you can enter the URL and a search button</strong></p>
  
  <pre><code>&lt;div class="input-append"&gt;
  &lt;input id="gadres" type="text" size="16" onclick="this.select();"placeholder="Via/Piazza, Comune" class="span2" /&gt;
  &lt;button title="Trova le Coordinate" onclick="codeAddress();" class="btn" type="button"&gt;Cerca&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>a marker is shown on the map and the coordinates in two boxes below</strong>.</p>
  
  <pre><code>&lt;div id="map-canvas"&gt;&lt;/div&gt; &lt;label for="lat"&gt;Latitude&lt;/label&gt;
  &lt;input type="text" name="lat" id="lat" required &gt;
  &lt;label for="lng"&gt;Longitude&lt;/label&gt;
  &lt;input type="text" name="lng" id="lng" required &gt;
  </code></pre>
  
  <p>If I want to try a different point I can click on the map and I get the new set of coordinates. This is the code and it's WORK!!!</p>
  
  <pre><code>var map;
      var geocoder;
      var marker;
  
      function initialize() {
      var latlng = new google.maps.LatLng(42.1471, 12.6342);
      var myOptions = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP 
      };
      map = new google.maps.Map(document.getElementById("map-canvas"),
          myOptions);
    geocoder = new google.maps.Geocoder();
    marker = new google.maps.Marker({
        position: latlng, 
        map: map
    });
  
  map.streetViewControl=false;
  
      google.maps.event.addListener(map, 'click', function(event) {
      marker.setPosition(event.latLng);
  
      var yeri = event.latLng;
      document.getElementById('lat').value=yeri.lat().toFixed(6);
      document.getElementById('lng').value=yeri.lng().toFixed(6);
  
    });
      }
  
  function codeAddress() {
      var address = document.getElementById("gadres").value;
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          map.setCenter(results[0].geometry.location);
          document.getElementById('lat').value=results[0].geometry.location.lat().toFixed(6);
          document.getElementById('lng').value=results[0].geometry.location.lng().toFixed(6);
  var latlong = "(" + results[0].geometry.location.lat().toFixed(6) + " , " +
      + results[0].geometry.location.lng().toFixed(6) + ")";
  
  
   var infowindow = new google.maps.InfoWindow({
          content: latlong
      });
  
          marker.setPosition(results[0].geometry.location);
          map.setZoom(16);
  
  google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
      });
  
        } else {
          alert("impossibile trovare la lang e la lat del punto");
        }
      });
    }
  </code></pre>
  
  <p>Now, however, I would like to improve it.</p>
  
  <ol>
  <li>I would like in the search box there was an auto-complete feature </li>
  <li>and then the marker can be moved by changing the coordinates. </li>
  </ol>
  
  <p>I'm just starting with the code and I try to change some parts on my code with this example <a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/places-searchbox</a> but I can not adapt it to my code. 
  I have also the problem of making marker draggable but i don't understand where i must to put "draggable command"</p>