Google Autocomplete address form is not working in yii2 -
i creating 1 application using yii2 in want use google autocomplete form search zip code or location. have include contains still script not working there mistake doing?
below code.
view file
<script src="https://maps.googleapis.com/maps/api/js?key=aizasydo_sej0fdet4kx7dvnsutoulir_1zuvu4&libraries=places&callback=initautocomplete" async defer></script> <div class="search-form"> <?php $form = activeform::begin(['id' => 'form-search']); ?> <?= $form->field($modelsearchform, 'location')->textinput(['placeholder' => 'select location'])->label(false) ?> <?php echo $form->field($modelsearchform, 'search')->textinput(['placeholder' => 'start typing looking out for'])->label(false); echo html::hiddeninput('searchid', '', [ 'id' => 'searchid' ]); echo html::hiddeninput('locationlatitude', '', [ 'id' => 'locationlatitude' ]); echo html::hiddeninput('locationlongitude', '', [ 'id' => 'locationlongitude' ]); ?> <?= html::submitbutton('go', ['class' => 'btn btn-primary', 'name' => 'signup-button']) ?> <?php activeform::end(); ?>
js code
var placesearch, autocomplete; var componentform = { street_number: 'short_name', route: 'long_name', locality: 'long_name', administrative_area_level_1: 'short_name', country: 'long_name', postal_code: 'short_name' }; function initautocomplete() { // create autocomplete object, restricting search geographical // location types. autocomplete = new google.maps.places.autocomplete( /** @type {!htmlinputelement} */(document.getelementbyid('searchform-location')), {types: ['geocode']}); autocomplete.addlistener('place_changed', fillinaddress); } function fillinaddress() { // place details autocomplete object. var place = autocomplete.getplace(); (var component in componentform) { document.getelementbyid(component).value = ''; document.getelementbyid(component).disabled = false; } (var = 0; < place.address_components.length; i++) { var addresstype = place.address_components[i].types[0]; if (componentform[addresstype]) { var val = place.address_components[i][componentform[addresstype]]; document.getelementbyid(addresstype).value = val; } } } function geolocate() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { var geolocation = { lat: position.coords.latitude, lng: position.coords.longitude }; var circle = new google.maps.circle({ center: geolocation, radius: position.coords.accuracy }); autocomplete.setbounds(circle.getbounds()); }); } }
Comments
Post a Comment