Google Maps AutoComplete & onsenui.min.js Conflict

jamal

Using Monaca iPhone debugger.

When an address is selected from addresses list , the INPUT element is not populated; the place_changed event is not fired as if it is being swallowed.

After several hour of debugging, I found that if I do not include the onsenui.min.js, the input gets populated with Google Maps auto complete result :

<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

Below is a simplified version that replicates the problem. Any clues?

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">

	<meta http-equiv="Content-Security-Policy" content="style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval';">

	<script src="components/loader.js"></script>

	<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
	<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

	<!-- comment out the following line and input gets populated -->
	<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>


	<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

	<script>
		document.addEventListener("deviceready", onDeviceReady, false);

		function onDeviceReady() {

			InitGoogleMaps();
		}

		var autocompleteStop1;

		function InitGoogleMaps() {

			autocompleteStop1 = new google.maps.places.Autocomplete(document.getElementById("txtStop1"));
			autocompleteStop1.addListener('place_changed', function () {
				var place = autocompleteStop1.getPlace();
				console.log(place);
			});

		}
	</script>

</head>


<body style="padding: 50px;">

	<div>
		<input id="txtStop1" type="text" />
	</div>

</body>

</html>

On typing start, Google address list drop shows up file:

With Onsen.mini.js included, selecting an address from list, does not work:

Commenting out Onsen.mini.js , input element is updated correctly:

Fran Diox

@jamal I get This service requires an API key. :sweat_smile:
This issue is quite weird. Have you checked that your functions are running? Perhaps you can try with ons.ready instead of deviceready event.

jamal

@Fran-Diox, based on I what found out on stackoverflow, it is a conflict with FastClick library which is embedded into the onsenui.js library which creates the problems for Google Maps Autocomplete features. It messes up the touch event of the address drop-down list. Please refer to the following:

https://stackoverflow.com/questions/17160220/google-places-autocomplete-with-jquery-mobile-not-working-on-mobile-touch-device/20056569#20056569

The ons.ready does not make a difference.

I tried the following mutant work-around, it works, but it is not guaranteed to work in future browsers.

$(document).on({
    'DOMNodeInserted': function() {
        $('.pac-item, .pac-item span', this).addClass('needsclick');
    }
}, '.pac-container');

But the following https://stackoverflow.com/a/35187209 works as well using MutationObservers and it is better.

BTW, the API key is not required for mobile devices; and I cannot add my API key since it will go over the limit.