Estoy creando un mapa para una búsqueda de ubicación, pero mi cuadro de búsqueda no muestra la función de autocompletar. Seguí el tutorial en https://www.youtube.com/watch?v=D_jUFC-Xktk&t=3s

este es mi mapa que no muestra autocomplete

índice.blade.php

 <script async src="https://maps.googleapis.com/maps/api/js?key=keysensor&libraries=places"></script> <div class="row"> <div class="col-lg-12"> <style> #map { width: 100%; height: 500px; } </style> <label for=""><b>ADRESSTANAH <font style="color: red;">*</font></b></label> <div class="form-group"> <input type="text" id="searchmap"> <div id="map"></div> </div> </div>

 var map = new google.maps.Map(document.getElementById('map'),{ center:{ lat:-6.8909965, lng:110.6046387 }, zoom:15 }); var marker = new google.maps.Marker({ position: { lat:-6.8909965, lng:110.6046387 }, map : map, draggable : true }); var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap')); google.maps.event.addListener(searchBox, 'places_changed', function(){ var places = searchBox.getPlaces(); var bounds = new google.maps.LatLngBounds(); var i, place; for(i=0; place=places[i];i++){ bounds.extends(place.geometry.location); marker.setPosition(place.geometry.location); } map.fitBounds(bounds); map.setZoom(15); }); google.maps.event.addListener(marker, 'position_changed', function(){ var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); $('#lat').val(lat); $('#lng').val(lng); });

Quiero mostrar autocompletar en el cuadro de búsqueda. por favor ayúdame a resolverlo. Gracias.