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

Google Maps AutoComplete & onsenui.min.js Conflict browsing