3. Google Maps AutoComplete & onsenui.min.js Conflict

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Google Maps AutoComplete & onsenui.min.js Conflict


  • 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:

    0_1510643037556_1.png

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

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

    0 1 Reply
  • Onsen UI

    @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.

    0 1 Reply

  • @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.

    0