<input type="text" id="input"/>
<div id="map" style="width: 200px; height: 200px;"></div>

$(document).ready(function(){
    var map_input = $('#input');
    setTimeout(function(){initMap()},'5000');
    function initMap() {
        var map = new google.maps.Map($('form #map'), {
            center: {lat: 33.8892846, lng: 35.539302},
            zoom: 11
        });

        var autocomplete = new google.maps.places.Autocomplete(map_input);
        var marker = new google.maps.Marker({
            map: map
        });

        autocomplete.addListener('place_changed', function() {
            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);
        });
    }
});