Nsryjdtyk

I am using google map with Baidu map. both of them comes through ajax request when we click on button specified their name. first-time google map appears with search box when I click on Baidu map and come back to google map search field was gone. If I tried to append or clone search field then search field stopped working.
Code I am using:

function initMap() {

    //   var locations = '<?php echo $location ?>'';

    var icon = '<?= IMG_URL; ?>location.png';



    var newarr = Array();

        map = new google.maps.Map(document.getElementById('map'),{

        zoom: 4,

        minZoom: 3,

        maxZoom: 20,

        center: {lat: 4.0633, lng: 102.2164},

        mapTypeId: 'roadmap',

        gestureHandling: 'greedy'

    });





    var infowindow = new google.maps.InfoWindow();



    markers = locations.map(function(location, i) {

    markers1 = new google.maps.Marker({

        position: location,

        id: location['id'],

        html: location['html'],

        icon : icon,

        map: map

    });

        google.maps.event.addListener(markers1, 'click', function() {

            infowindow.setContent(this.html);

            infowindow.open(map, this);

        });

        return markers1;

    });

    if (typeof google === 'object' && typeof google.maps === 'object') {

       //alert("load");

        $('#check').html('load');

    }else{

        //alert("unload");

       $('#check').html('unload');

    }

    var mcOptions = {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', gridSize: 40, maxZoom: 20, zoomOnClick: false, minimumClusterSize: 2};



    // Add a marker clusterer to manage the markers.

    var markerCluster = new MarkerClusterer(map, markers, mcOptions);



    //console.log(markerCluster);

    google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster){



        var clMarkers = cluster.getMarkers();

        var newarr = Array();

        clMarkers.forEach(function(element) {

            newarr.push(element.id);

        });





        $.ajax({ 

            url: 'property_scroll.php',

            data: {"id": newarr},

            type: 'post',

            success: function(result){

                //alert(result);

                $("#show_property").html(result);

            }              

        });

    });



    // Create the search box and link it to the UI element.

    var input = document.getElementById('pac-input');

    //var input = '<input id="pac-input" class="form-control controls" placeholder="Enter Keyword" type="text">';

    //var input = /** @type {HTMLInputElement} */(document.getElementById('pac-input').clone());

    var searchBox = new google.maps.places.SearchBox(input);

    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);



    // Bias the SearchBox results towards current map's viewport.

    map.addListener('bounds_changed', function() {

      searchBox.setBounds(map.getBounds());

    });



     markers = ;

    // Listen for the event fired when the user selects a prediction and retrieve

    // more details for that place.

    searchBox.addListener('places_changed', function() {

      var places = searchBox.getPlaces();



      if (places.length == 0) {

        return;

      }

      // Clear out the old markers.

    /*  markers.forEach(function(marker) {

        marker.setMap(null);

      });*/

      markers = ;



      // For each place, get the icon, name and location.

      var bounds = new google.maps.LatLngBounds();

      places.forEach(function(place) {

        if (!place.geometry) {

          console.log("Returned place contains no geometry");

          return;

        }

        var 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(25, 25)

        };



        // Create a marker for each place.

       /* markers.push(new google.maps.Marker({

          map: map,

          icon: icon,

          title: place.name,

          position: place.geometry.location

        }));*/



        if (place.geometry.viewport) {

          // Only geocodes have viewport.

          bounds.union(place.geometry.viewport);

        } else {

          bounds.extend(place.geometry.location);

        }

      });

      map.fitBounds(bounds);

    });

}