Google Maps Autocomplete Not Showing Address List Using UpdatePanel

Question

I am trying to pass the address information that comes from a database and showing in a textbox (txAddress from SQL) to another textbox (txInputAddress GMap). In order to pass the value from txAddress to txInputAddress I needed to use an updatepanel. Here is how I coded it:

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <div id="pac-container">
            &nbsp;
  <asp:TextBox ID="txInputAddress" runat="server" placeholder="Enter a location" Width="415px" AutoPostBack="true" autocomplete="off"></asp:TextBox>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnCopytToGoogleMaps" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

This is the JavaScript I am using from Google, which I modified in order to use a C# textbox to make it easier to pass the value from one textbox to another, as mentioned before.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 35.6145169, lng: -88.81394690000002 },
        zoom: 13
    });
    var card = document.getElementById('pac-card');
    var input = document.getElementById("txInputAddress");
    var types = document.getElementById('type-selector');
    var strictBounds = document.getElementById('strict-bounds-selector');

    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);

    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    var infowindow = new google.maps.InfoWindow();
    var infowindowContent = document.getElementById('infowindow-content');
    infowindow.setContent(infowindowContent);
    var marker = new google.maps.Marker({
        map: map,
        anchorPoint: new google.maps.Point(0, -29)
    });

    autocomplete.addListener('place_changed', function () {
        infowindow.close();
        marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            // User entered the name of a Place that was not suggested and
            // pressed the Enter key, or the Place Details request failed.
            window.alert("No details available for input: '" + place.name + "'");
            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.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(' ');
        }

        infowindowContent.children['place-icon'].src = place.icon;
        infowindowContent.children['place-name'].textContent = place.name;
        infowindowContent.children['place-address'].textContent = 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);
        radioButton.addEventListener('click', function () {
            autocomplete.setTypes(types);
        });
    }

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

    document.getElementById('use-strict-bounds')
        .addEventListener('click', function () {
            console.log('Checkbox clicked! New state=' + this.checked);
            autocomplete.setOptions({ strictBounds: this.checked });
        });
}

Here is an image of what I get. As you can see, it shows the address from txAddress to txInputAddress but then if you don't refresh the page, the autocomplete will not show up. Any idea what to do to solve this issue? In other words, I need to pass the address from txAddress to txInputAddress and show the autocomplete options.

Answer 1

After using the UpdatePanel, the browser has lost the controls and elements in the DOM. They have to be rebinded. So use the function below to call initMap every time the UpdatePanel is triggered.

<script type="text/javascript">
    initMap();

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        initMap();
    });
</script>