Search code examples
cordovaibm-mobilefirstgoogle-places-apigoogle-placesworklight-runtime

Google Places Autocomplete Issue with worklight - can't tap

I'm trying to get Google Places Autocomplete API working on WorkLight, but it looks like there is something wrong.

When using my computer's browser, once I start typing the name of a place, the Autocomplete suggestions works fine and I am able to pick one. But when running the app on a mobile device (either Android or iPhone), I am able to see the autocomplete results, but nothing happens when I tap them.

I found some js libraries that makes it easier to get GooglePlaces Autocomplete API working - I mean, except on mobile devices (WorkLight / Cordova App)

I Also found some people reporting that problem with cordova. Some were able to fix the problem by adding a "needclick" class to google's element, but that didn't work for me

Here is a JS Library for testing: http://ubilabs.github.io/geocomplete/

StackOverflow link with related issue:

can't tap on item in google autocomplete list on mobile

Does anyone have any idea for a possible solution?

Solution

  • I just tried it and it worked fine for me. This is what I did, let us know if you did anything different

    1. Created a new Hybrid app
    2. Added jquery.geocomplete.js to common/js folder
    3. Updated the index.html code with the code sample provided by the api documentation
    4. Tested on common preview (works fine)
    5. Created an android environment and executed it on a Nexus 7 device(android 4.4.2) - Worked fine.

    With "worked fine" I mean that I can see the list of options provided while I type in the text field and I can tap one of the options and it will fill the text field.

    This is the code for index.html

    <!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>googleplaces</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
        <!--
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
        -->
        <link rel="stylesheet" href="css/main.css">
        <style type="text/css" media="screen">
        form {
            background: url(https://developers.google.com/maps/documentation/places/images/powered-by-google-on-white.png) no-repeat center right;
        }
</style>
        <script>window.$ = window.jQuery = WLJQ;</script>
    </head>
    <body style="display: none;">
        <form>
      <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
      <input id="find" type="button" value="find" />
    </form>

        <script src="js/initOptions.js"></script>
        <script src="js/main.js"></script>
        <script src="js/messages.js"></script>
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/jquery.geocomplete.js"></script>

        <script>
  $(function(){

    $("#geocomplete").geocomplete()
      .bind("geocode:result", function(event, result){
        $.log("Result: " + result.formatted_address);
      })
      .bind("geocode:error", function(event, status){
        $.log("ERROR: " + status);
      })
      .bind("geocode:multiple", function(event, results){
        $.log("Multiple: " + results.length + " results found");
      });

    $("#find").click(function(){
      $("#geocomplete").trigger("geocode");
    });



  });
    </script>
    </body>
</html>