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:
With Onsen.mini.js included, selecting an address from list, does not work:
Commenting out Onsen.mini.js , input element is updated correctly:
-
@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 withons.ready
instead ofdeviceready
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.
$(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.