integration of multiple place autocomplete address form
<p>I'd like to add the <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform" rel="nofollow noreferrer">Place Autocomplete Address Form</a> couples times in my view as a partial view:</p>

<p><strong>Partial view _GeoApi</strong></p>

<pre><code> @model int

  &lt;p&gt;&lt;input type="text" onfocus="geolocate(@Model)" placeholder="Taper l'adresse"  id="@("autocomplete" + Model)" class=" fiche" name="nomlieu_adress" style="width:500px"&gt;&lt;/p&gt;

    &lt;p&gt;
        &lt;label style="width:90px"&gt;Avenue&lt;/label&gt;&lt;input type="text" class=" fiche" id="@("street_number"+Model)" name="avenue_adress" style="width:160px; " /&gt;
        &lt;label style="width:90px"&gt;Rue&lt;/label&gt;&lt;input type="text" class=" fiche"   id="@("route" + Model)" name="rue_adress" style="width:157px" /&gt;
    &lt;/p&gt;

    &lt;p&gt; &lt;label style="width:90px"&gt;Ville(*)&lt;/label&gt;&lt;input type="text" class=" fiche"   id="@("locality" + Model)" name="ville_adress" style="width:410px" required /&gt; &lt;/p&gt;

    &lt;p&gt;
        &lt;label style="width:90px"&gt;Etat(*)&lt;/label&gt;&lt;input type="text"   id="@("administrative_area_level_1" + Model)" class=" fiche" name="etat_adress" style="width:160px" required /&gt;
        &lt;label style="width:90px"&gt;Code Postal(*)&lt;/label&gt;&lt;input type="text"   id="@("postal_code" + Model)" class=" fiche" name="code_postal_adress" style="width:157px" required /&gt;
    &lt;/p&gt;

    &lt;p&gt; &lt;label style="width:90px"&gt;Pays(*)&lt;/label&gt;&lt;input type="text"   id="@("country" + Model)" class=" fiche" name="pays_adress" style="width:410px" required /&gt;&lt;/p&gt;
</code></pre>

<p><strong>Main view</strong></p>

<pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&amp;libraries=places&amp;callback=initAutocomplete" async defer&gt;&lt;/script&gt;
&lt;script src="~/Scripts/DemandeClient/AjouterDemande.js"&gt;&lt;/script&gt;

&lt;div class="tab-pane" id="tab_1"&gt;
    &lt;form class="editForm"&gt;

      @Html.Partial("_GeoApi",1)

    &lt;/form&gt;
&lt;/div&gt;
..............................
&lt;div class="tab-pane" id="tab_2"&gt;
    &lt;form class="editForm"&gt;

      @Html.Partial("_GeoApi",2)

    &lt;/form&gt;
&lt;/div&gt;
..................................
&lt;div class="tab-pane" id="tab_3"&gt;
    &lt;form class="editForm"&gt;

      @Html.Partial("_GeoApi",3)

    &lt;/form&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Script</strong></p>

<pre><code>var placeSearch, autocomplete1, autocomplete2, autocomplete3;
var componentForm1 = {
    street_number1: 'short_name',
    route1: 'long_name',
    locality1: 'long_name',
    administrative_area_level_11: 'short_name',
    country1: 'long_name',
    postal_code1: 'short_name'
};

var componentForm2 = {
    street_number2: 'short_name',
    route2: 'long_name',
    locality2: 'long_name',
    administrative_area_level_12: 'short_name',
    country2: 'long_name',
    postal_code2: 'short_name'
};

var componentForm3 = {
    street_number3: 'short_name',
    route3: 'long_name',
    locality3: 'long_name',
    administrative_area_level_13: 'short_name',
    country3: 'long_name',
    postal_code3: 'short_name'
};

    function initAutocomplete() {

        console.log("initAutocomplete");

        try {
            autocomplete1 = new google.maps.places.Autocomplete((document.getElementById('autocomplete1')), { types: ['geocode'] });
            autocomplete1.addListener('place_changed', fillInAddress(1));

            autocomplete2 = new google.maps.places.Autocomplete((document.getElementById('autocomplete2')), { types: ['geocode'] });
            autocomplete2.addListener('place_changed', fillInAddress(2));

            autocomplete3 = new google.maps.places.Autocomplete((document.getElementById('autocomplete3')), { types: ['geocode'] });
            autocomplete3.addListener('place_changed', fillInAddress(3));
        } catch (e) {
            console.log("exception from initAutocomplete = " + e.message);
        }



    }


    function fillInAddress(numb) {

        console.log("fillInAddress (" + numb + ")");

        try {

        if (numb == 1)
        {
             var place = autocomplete1.getPlace(); 
             for (var component in componentForm1) {
                document.getElementById(component).value = '';
                document.getElementById(component).disabled = false;
            }

            for (var i = 0; i &lt; place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (componentForm1[addressType]) {
                    var val = place.address_components[i][componentForm1[addressType]];
                    document.getElementById(addressType).value = val;
                }
            }
        }

            if (numb == 2)
            {
                var place  = autocomplete2.getPlace(); 
                for (var component in componentForm2) {
                    document.getElementById(component).value = '';
                    document.getElementById(component).disabled = false;
                }

                for (var i = 0; i &lt; place.address_components.length; i++) {
                    var addressType = place.address_components[i].types[0];
                    if (componentForm2[addressType]) {
                        var val = place.address_components[i][componentForm2[addressType]];
                        document.getElementById(addressType).value = val;
                    }
                }
            }

                if (numb == 3)
                {
                    var place = autocomplete3.getPlace(); 
                    for (var component in componentForm3) {
                        document.getElementById(component).value = '';
                        document.getElementById(component).disabled = false;
                    }

                    for (var i = 0; i &lt; place.address_components.length; i++) {
                        var addressType = place.address_components[i].types[0];
                        if (componentForm3[addressType]) {
                            var val = place.address_components[i][componentForm3[addressType]];
                            document.getElementById(addressType).value = val;
                        }
                    }
                }


        } catch (e) {
            console.log("exception from fillInAddress (" + numb + ") = " + e.message);
        }

    }



    function geolocate(numb) {

        console.log("geolocate (" + numb + ")");

        try {
            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(function (position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });

                    if (numb == 1) autocomplete1.setBounds(circle.getBounds());
                    if (numb == 2) autocomplete2.setBounds(circle.getBounds());
                    if (numb == 3) autocomplete3.setBounds(circle.getBounds());
                });
            }
        } catch (e) {
            console.log("exception from geolocate (" + numb + ") = " + e.message);
        }

    }
</code></pre>

<p>when I run the application I get these errors in the loading </p>

<blockquote>
  <blockquote>
    <p>initAutocomplete</p>
  </blockquote>
  
  <p>fillInAddress (1)</p>
  
  <p>exception from fillInAddress (1) = Cannot read property
  'address_components' of undefined</p>
  
  <p>fillInAddress (2)</p>
  
  <p>exception from fillInAddress (2) = Cannot read property
  'address_components' of undefined</p>
  
  <p>fillInAddress (3) </p>
  
  <p>exception from fillInAddress (3) = Cannot read property
  'address_components' of undefined</p>
</blockquote>

<p>when I focus in for example the first autocomplete form, I get the message <code>geolocate (1)</code> but when I select a place this exception appear:</p>

<blockquote>
  <p>js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&amp;libraries=places&amp;callback=initAutocomplete:104
  Uncaught TypeError: Cannot read property 'apply' of
  undefined_.J.trigger @
  js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&amp;libraries=places&amp;callback=initAutocomplete:104sb
  @
  js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&amp;libraries=places&amp;callback=initAutocomplete:38sb
  @
  js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&amp;libraries=places&amp;callback=initAutocomplete:38_.t.set
  @
  js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&amp;libraries=places&amp;callback=initAutocomplete:106(anonymous
  function) @
  js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&amp;libraries=places&amp;callback=initAutocomplete:52(anonymous
  function) @ places_impl.js:24(anonymous function) @
  places_impl.js:14(anonymous function) @ places_impl.js:8(anonymous
  function) @ common.js:43(anonymous function) @ common.js:34(anonymous
  function) @ common.js:43d @ common.js:39(anonymous function) @
  PlaceService.GetPlaceDetails?2sfr-FR&amp;8sChIJ0XsDKGqKfg0RovjXq-O-QHE&amp;10e3&amp;key=AIzaSyBCVSBoBAUjAfb-Pfx…:1</p>
</blockquote>

<p>So I need to know:</p>

<ol>
<li>What are the reasons of these exceptions?</li>
<li>How can I fix it?</li>
</ol>