Integrating Google Maps Place Form into the autocomplete address form javascript

Question

I am trying to integrate this Place Form into this Autocomplete address form. But I have failed on making both work. Currently it works only the address complete form, map loads but it doesn't auto-point to the location typed. Please help me on this I am a noob in javascript. This is the fiddle that I am working on: http://jsfiddle.net/qrAGU/. I will really appreciate your help.

JS:

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 initialize() {
    var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    var input = (
    document.getElementById('autocomplete'));
    /*
var types = document.getElementById('type-selector');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);*/
// tried also moving the comment only for types, but still nothing  
    autocomplete = new google.maps.places.Autocomplete(
    input,
    { 
types: ['geocode'] 
    }
    );
    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        fillInAddress();
        infowindow.close();
        marker.setVisible(false);
        autocomplete.bindTo('bounds', map);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            return;
        }
    });
    if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
    } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.Icon} */({
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    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(' ');
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
    //});

    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, types) {
        var radioButton = document.getElementById(id);
        google.maps.event.addDomListener(radioButton, 'click', function() {
            autocomplete.setTypes(types);
        });
    }

}
google.maps.event.addDomListener(window, 'load', initialize);
// [START region_fillform]
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;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < 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;
        }
    }
}
// [END region_fillform]

// [START region_geolocation]
// 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 = new google.maps.LatLng(
            position.coords.latitude, position.coords.longitude);
            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
            geolocation));
        });
    }
}

HTML

<div id="locationField">
    <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="controls"></input>
</div>

<table id="address">
    <tr>
        <td class="label">Street address</td>
        <td class="slimField">
            <input class="field" id="street_number" disabled="true"></input>
        </td>
        <td class="wideField" colspan="2">
            <input class="field" id="route" disabled="true"></input>
        </td>
    </tr>
    <tr>
        <td class="label">City</td>
        <td class="wideField" colspan="3">
            <input class="field" id="locality" disabled="true"></input>
        </td>
    </tr>
    <tr>
        <!--<td class="label">State</td>
        <td class="slimField"><input class="field"
              id="administrative_area_level_1" disabled="true"></input></td>-->
        <td class="label">Zip code</td>
        <td class="wideField">
            <input class="field" id="postal_code" disabled="true"></input>
        </td>
    </tr>
    <tr>
        <td class="label">Country</td>
        <td class="wideField" colspan="3">
            <input class="field" id="country" disabled="true"></input>
        </td>
    </tr>
</table>
<div id="map-canvas"></div>

Answer 1

If I understood well you are looking for something like this:

<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
  #map-canvas { width: 600px; height: 400px; }
  #locationField, #controls {
    position: relative;
    width: 480px;
  }
  #autocomplete {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 99%;
  }
  .label {
    text-align: right;
    font-weight: bold;
    width: 100px;
    color: #303030;
  }
  #address {
    border: 1px solid #000090;
    background-color: #f0f0ff;
    width: 480px;
    padding-right: 2px;
  }
  #address td {
    font-size: 10pt;
  }
  .field {
    width: 99%;
  }
  .slimField {
    width: 80px;
  }
  .wideField {
    width: 200px;
  }
  #locationField {
    height: 20px;
    margin-bottom: 2px;
  }
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

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 initialize() {
var mapOptions = {
    center: new google.maps.LatLng(-33.8688, 151.2195),
    zoom: 13
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {types: ['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function() {   
    // 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;
    }   
    var newPos = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());  
    map.setOptions({
        center: newPos,
        zoom: 15
    });
    //add a marker
    var marker = new google.maps.Marker({
        position: newPos,
        map: map,
        title: "New marker"
    });

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < 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;
        }
    }
});
}

</script>
</head>
<body onload="initialize()">
<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address"
         onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
  <tr>
    <td class="label">Street address</td>
    <td class="slimField"><input class="field" id="street_number" disabled="true"></input></td>
    <td class="wideField" colspan="2"><input class="field" id="route" disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">City</td>
    <td class="wideField" colspan="3"><input class="field" id="locality"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">State</td>
    <td class="slimField"><input class="field"
          id="administrative_area_level_1" disabled="true"></input></td>
    <td class="label">Zip code</td>
    <td class="wideField"><input class="field" id="postal_code"
          disabled="true"></input></td>
  </tr>
  <tr>
    <td class="label">Country</td>
    <td class="wideField" colspan="3"><input class="field"
          id="country" disabled="true"></input></td>
  </tr>
</table>

<div id="map-canvas"></div>
</body>
</html>

It updates the map and the form at the same time, I hope it helps