Autocomplete generate multiple markers

Question

My goal is to have several input fields with Autocomplete functionality and each input will generate a marker on the map. I then need the map to zoom in to contain all of the markers. I have this working partially, without the Autocomplete functionality. I have tried adding the Google Maps API Places Autocomplete code to my for loop, but to no avail. It gives autocomplete functionality to all the input fields but only places a marker for the last input.

Any help/insight/guidance is appreciated.

Here is my code, the autocomplete is currently deleted since I couldn't get it to work.

<div class="container-fluid">
      <div class="row-fluid">
        <div class="span4 well">
            <div id="locations">
                <form>
                    <label>Location 0</label>
                    <input id="address0" type="text" size="50" >
                    <button id="clearField0">Clear</button>

                <div class="panel">
                    <label>Location 1</label>
                    <input id="address1" type="text" size="50">
                    <button id="clearField0">Clear</button>
                </div>
                <div class="panel">
                    <label>Location 2</label>
                    <input id="address2" type="text" size="50">
                    <button id="clearField0">Clear</button>
                </div>
                </form>
            </div>
            <button id="addField">+</button>
            <button id="deleteField">-</button>
            <button id="submit">Submit form</button>
        </div>
        <div class="span8">
            <div id="map-wrapper">
                <div id="google-map"></div>
            </div>
        </div>
      </div>
    </div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCtNo_o0u8wYeqgiFF-KpvAtEy18T-PvAo&sensor=false&callback=createMap"></script>

    <script type="text/javascript">

        var inputFields = parseInt($('form input').size());
        var markers = [];


        var createMap = function() {
            var latlngbounds = new google.maps.LatLngBounds();
            var geocoder = new google.maps.Geocoder();

            var myOptions = {
                center : new google.maps.LatLng(35.9081, -78.8628), //center to RTP
                zoom   : 12,
                zoomControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },

            map = new google.maps.Map(document.getElementById("google-map"), myOptions);

            $("#submit").on("click", function() {
                setAllMap(null);
                markers.pop();
                for (i=0; i<inputFields; i++) {
                    var location = $("#address" + i).val();
                    geocoder.geocode( {'address': location}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location
                            });
                            latlngbounds.extend(results[0].geometry.location);
                            map.fitBounds(latlngbounds);
                        } else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    });
                };
            });

            function setAllMap(map) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(map);
                }
            }

            $('#addField').click(function(){        //add input field to bottom of form
                $('form').append('<div class="panel"><label>Location '+ inputFields +'</label><input id="address'+ inputFields +'" type="text" size="50"><button id="clearField'+ inputFields +'">Clear</button></div>');
                inputFields++;
            });

            $('#deleteField').click(function(){     //delete last input field
                $('.panel').last().remove();
                inputFields--;
            });

        };



      </script>

Answer 1

My first problem was including the places library in the API reference. Following that, I simply needed two lines of code from Google's Places Autocomplete example page, as opposed to the entire script they offer:

var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
var autocomplete = new google.maps.places.Autocomplete(input);

These two lines in my for loop solved the problem. Thanks again to Dr. Molle whose comment made me rethink what code I needed.