Why only the marker of the last input appears in Google Places Autocomplete?

Hi, i'm using Google Places Autocomplete with 4 inputs, autocomplete works fine, but only the marker and infowindow of the last input appears. Can someone tell me where is the problem and why the markers and infowindows of other inputs don't appear on the map? Any answer is appreciated.

<!DOCTYPE html>
<html>
    <head>
        <title>Place Autocomplete</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">

        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"></script>

        <script>
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(40.4700, 49.9600),
        zoom: 10,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL
        },
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        }
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
    var types = document.getElementById('type-selector');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
    var autocompleteOptions = {
        componentRestrictions: {
            country: "
az "
        }
    };

    var inputs = document.getElementsByClassName("
controlsInput ");

    for (var i = 0; i < inputs.length; i++) {

        var autocomplete = new google.maps.places.Autocomplete(inputs[i], autocompleteOptions);
        autocomplete.bindTo('bounds', map);

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var infowindow = new google.maps.InfoWindow();
            var marker = new google.maps.Marker({
                map: map
            });
            infowindow.close();
            marker.setVisible(false);
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

            // If the place has a geometry, then present it on a map.
            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);
        });
    }

    setupClickListener('changetype-all', []);
    setupClickListener('changetype-establishment', ['establishment']);
    setupClickListener('changetype-geocode', ['geocode']);
}

google.maps.event.addDomListener(window, 'load', initialize);

            </script>
          </head>
          <body>
            <input id="pac-input" class="controlsInput" type="text" placeholder="Enter the pickup point"><br>
            <input id="pac-input2" class="controlsInput" type="text" placeholder="Enter your destination"><br>
            <input id="pac-input3" class="controlsInput" type="text" placeholder="Enter your destination"><br>
            <input id="pac-input4" class="controlsInput" type="text" placeholder="Enter your destination"><br><br>

        <div hidden="hidden" id="type-selector" class="controls">
            <input type="radio" name="type" id="changetype-all" checked="checked">
            <label for="changetype-all">All</label>

            <input type="radio" name="type" id="changetype-establishment">
            <label for="changetype-establishment">Establishments</label>

            <input type="radio" name="type" id="changetype-geocode">
            <label for="changetype-geocode">Geocodes</label>
        </div>
        <div id="map-canvas" style="width: 600px; height: 380px; "></div>
    </body>
</html>

One way to fix it:

<script>
var map = null;
          var autocompleteOptions = {
           componentRestrictions: {country: "az"}
          };

function setupAutocomplete(autocomplete,inputs,i) {
            autocomplete[i] = new google.maps.places.Autocomplete(inputs[i], autocompleteOptions);
            autocomplete[i].bindTo('bounds', map);

            google.maps.event.addListener(autocomplete[i], 'place_changed', function() {
              var infowindow = new google.maps.InfoWindow();
              var marker = new google.maps.Marker({
                    map: map
              });  
              infowindow.close();
              marker.setVisible(false);
              var place = autocomplete[i].getPlace();
              if (!place.geometry) {
                return;
              }

              // If the place has a geometry, then present it on a map.
              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);
            });
}
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(40.4700, 49.9600),
            zoom: 10,
            zoomControl:true,
            zoomControlOptions: {
              style:google.maps.ZoomControlStyle.SMALL
            },
            mapTypeControl:true,
            mapTypeControlOptions: {
              style:google.maps.MapTypeControlStyle.DROPDOWN_MENU 
            }
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
          var types = document.getElementById('type-selector');
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);


          var inputs = document.getElementsByClassName("controlsInput");
          var autocomplete = [];
          for(var i = 0; i < inputs.length; i++) {  
           setupAutocomplete(autocomplete,inputs,i);
          }
          // 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() {
              for (var i=0 ; i<autocomplete.length; i++) {
                autocomplete[i].setTypes(types);
              }
            });
          }

          setupClickListener('changetype-all', []);
          setupClickListener('changetype-establishment', ['establishment']);
          setupClickListener('changetype-geocode', ['geocode']);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        </script>

working example

来源：https://stackoverflow.com/questions/21335716/why-only-the-marker-of-the-last-input-appears-in-google-places-autocomplete

标签

javascript

google-maps

google-maps-api-3

autocomplete

google-maps-markers