Google Places Autocomplete not working in modal window

[drewman1970]

I have several instances of the same form ID on my page all with a working autocomplete function but when the form is used in a popup Modal via the shortcode the autocomplete does not work and there is nothing in the console.

I have tried creating duplicate forms with different ID’s but nothing seems to allow the autocomplete to fire in a modal.

Any ideas. Is this an known issue?

Here is the sample code I am using inside an code box in the form.

<script>
function Autocomplete() {

var input = document.getElementsByClassName('autocomplete')[0];
var input2 = document.getElementsByClassName('autocomplete2')[0];

var autocomplete = new google.maps.places.Autocomplete(input);
var autocomplete2 = new google.maps.places.Autocomplete(input2);

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

autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();

var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}

infowindow.setContent('<div>' + place.name + '<br>' + address);
infowindow.open();
});
}
</script>

I am also firing the places api via the wordpress global in the divi theme.

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtQLMWhbHgghlK8stn-c2Xw3dg5z1aKj4&libraries=places&callback=Autocomplete" aysnc defer>
</script>

`

I have also integrated a autocomplete plugin that works as well. Does not seem to conflict, when I remove it — same modal behavior with or without it.

• This topic was modified 7 years, 4 months ago by drewman1970.
• This topic was modified 7 years, 4 months ago by drewman1970.
• This topic was modified 7 years, 4 months ago by drewman1970.

[drewman1970]

Does anyone have a solution to this problem? I have not had a response from support, and I need to fix this issue (bug) asap.

• This reply was modified 7 years, 3 months ago by drewman1970.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[drewman1970]

I sent an email with the dev link.

[drewman1970]

As it turns out it was a Z-index issue.

If we set .mfp-wrap to z-index:1043; and .mfp-bg: z-index:1044. it allows the .pac-container that is set at z-index:1045; to work as it should.

Just have to adjust the template header z-index accordingly.

Mark solved

• This reply was modified 7 years, 3 months ago by drewman1970.

[Author]

Posts