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=""></script>

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

        <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="">
        <link rel="stylesheet" href="">
        <!-- comment out the following line and input gets populated -->
        <script src=""></script>
        <script src=""></script>
            document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {
            var autocompleteStop1;
            function InitGoogleMaps() {
                autocompleteStop1 = new google.maps.places.Autocomplete(document.getElementById("txtStop1"));
                autocompleteStop1.addListener('place_changed', function () {
                    var place = autocompleteStop1.getPlace();
    <body style="padding: 50px;">
            <input id="txtStop1" type="text" />

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


    With included, selecting an address from list, does not work:

    Commenting out , input element is updated correctly:

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

    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.

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

    But the following 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