How to add google autocomplete on modal popup using ajax in php with jquery
If you want to use google autocomplete api on modal popup. when you are getting data through ajax on modal pop. then you can use below code :
1. your ajax code :
$.ajax({ data: {YOUR_DATA}, type: 'post', url: 'YOUR_AJAX_URL' , success: function(response) { if (response) { var json_array = $.parseJSON(response); if(json_array['status']=='success'){ $('#YOUR_MODAL_ID').modal('show'); showSuggestionMap(); google.maps.event.addDomListener(window, 'load', showSuggestionMap); } } } });
2. after this use below script function :
function showSuggestionMap() { var input = document.getElementById('YOUR_INPUT_FIELD'); var options = { componentRestrictions: {country: 'au'} }; var autocomplete = new google.maps.places.Autocomplete(input, options); google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); }); var input = document.getElementById('YOUR_INPUT_FIELD'); google.maps.event.addDomListener(input, 'keydown', function(event) { }); }
3. use below css :
.pac-container .pac-logo { z-index:9999999;}
Output :
Share