Codeigniter Google Maps - callback init() AJAX?

Question

JavaScript

I'm using Google Maps for CI.
Everything works fine with a standard page load, when PHP generates JS and a container for the map and gives in two variables $map['js'], $map['html'];
It is enough to display these variables in the view - there are no difficulties with this.

But, if the generated container and js is sent to the page via AJAX, the map works, except for finding the address.
One error occurs:

Uncaught TypeError: Cannot read property 'Autocomplete' of undefined

JS returned by Ajax:

<script type="text/javascript">
      //<![CDATA[
      
      var map; // Global declaration of the map
      var lat_longs = new Array();
      var markers = new Array();
      var placesService;
      var placesAutocomplete;
      function initialize() {
        
        var iw = new google.maps.InfoWindow();
        
         
        var myOptions = {
        		zoom: 14,
        		mapTypeId: google.maps.MapTypeId.ROADMAP}
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        // Try W3C Geolocation (Preferred)
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
          }, function() { alert("Unable to get your current position. Please try again. Geolocation service failed."); });
        // Browser doesn't support Geolocation
        }else{
          alert('Your browser does not support geolocation.');
        }
      var autocompleteOptions = {
          }
        var autocompleteInput = document.getElementById('address');
        
        placesAutocomplete = new google.maps.places.Autocomplete(autocompleteInput, autocompleteOptions);
        placesAutocomplete.bindTo('bounds', map);
          google.maps.event.addListener(placesAutocomplete, 'place_changed', function() {
            
                  iw.close(); var place = placesAutocomplete.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_0.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_0.setPosition(place.geometry.location);
          marker_0.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(' ');
                  }  iw.open(map, marker_0);
          });
          google.maps.event.addListener(map, "bounds_changed", function(event) {
    			if (!centreGot) {
                var mapCentre = map.getCenter();
                marker_0.setOptions({
                  position: new google.maps.LatLng(mapCentre.lat(), mapCentre.lng()) 
                });
              }
            centreGot = true;
  			});
      
      var myLatlng = new google.maps.LatLng(35.731149, 4.5094663);	
      var markerOptions = {
        map: map,
        position: myLatlng,
        draggable: true		
      };
      marker_0 = createMarker(markerOptions);
      
        google.maps.event.addListener(marker_0, "dragend", function(event) {
          $("#mapX").val(event.latLng.lat());$("#mapY").val(event.latLng.lng());
        });
        
      
      }
    
    
    function createMarker(markerOptions) {
      var marker = new google.maps.Marker(markerOptions);
      markers.push(marker);
      lat_longs.push(marker.getPosition());
      return marker;
    }
    function placesCallback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            
            var place = results[i];
          
            var placeLoc = place.geometry.location;
            var placePosition = new google.maps.LatLng(placeLoc.lat(), placeLoc.lng());
            var markerOptions = {
         			map: map,
                	position: placePosition
              	};
              	var marker = createMarker(markerOptions);
              	marker.set("content", place.name);
              	google.maps.event.addListener(marker, "click", function() {
                	iw.setContent(this.get("content"));
                	iw.open(map, this);
              	});
              	
              	lat_longs.push(placePosition);
          
          }
          
        }
      }
      
      function loadScript() {
        var script = document.createElement("script");
  				script.type = "text/javascript";
  				script.src = "http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=initialize";
  				document.body.appendChild(script);
      }
      window.onload = loadScript;
      
      //]]>
      </script>

The field where you enter the address to search has id = "address"

Autosearch functions:

placesAutocomplete = new google.maps.places.Autocomplete(autocompleteInput, autocompleteOptions);

In general, the problem, as I understand it, is the asynchrony of function calls. The text of the error is shown above.
Who can help with this problem is a real JS guru, because none of the specialists could solve

Answer 1

Can you elaborate on what's happening on the page? When an AJAX request occurs, where does it occur and why, what should be returned and how is it processed?
So far, it is obvious, only that you have an error due to the fact that google.maps.places === "undefined".
To avoid problems with asynchrony, you need to correctly place event handlers / generators in callbacks.