Monaca Onsen UI Discord Chat Github Repo

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.