Autocomplete Google maps

1

On touch devices, i cant select any suggestions by Google Maps Autocomplete

			function initMap() {
				// Create a map object and specify the DOM element for display.
				var map = new google.maps.Map(document.getElementById("map"), {
					center: {lat: 48.40921, lng: 15.61415},
					zoom: 13,
					disableDefaultUI: true,
					scrollwheel: false,
					draggable: false,
					styles: map_styles,
				});
				var input = /** @type {!HTMLInputElement} */(document.getElementById('task-address'));
				var autocomplete = new google.maps.places.Autocomplete(input);
				autocomplete.bindTo('bounds', map);
				
				var marker = new google.maps.Marker({
					map: map,
					anchorPoint: new google.maps.Point(0, -29)
				});

				autocomplete.addListener('place_changed', function() {
					marker.setVisible(false);
					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.setIcon(({
						size: new google.maps.Size(71, 71),
						origin: new google.maps.Point(0, 0),
						anchor: new google.maps.Point(17, 34),
						scaledSize: new google.maps.Size(35, 35)
					}));
					marker.setPosition(place.geometry.location);
					marker.setVisible(true);

					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(' ');
					}
					var lat = place.geometry.location.lat(), lng = place.geometry.location.lng();
					var input_lat = /** @type {!HTMLInputElement} */(document.getElementById('lat'));
					var input_lng = /** @type {!HTMLInputElement} */(document.getElementById('lng'));

				});
			} 
			initMap();

thats my script which i use in component

2

Try to add no-fastclick class to generated autocomplete HTML element or to some its parent element

3

but how can i add it so it works?

4

I already figured out a nice way to do so thank you very much here is the snippet of code i have used:

$$(document).on('DOMNodeInserted','.pac-container' , function() {
		$$('.pac-item, .pac-item span').addClass('no-fastclick');
	}
);
5 Likes