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


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



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


Log in to reply