All geek questions in one place

Google Places auto-complete error when working with backlight - cannot

I'm trying to get the Google Places auto-complete API working on WorkLight, but something seems to be wrong.

When using my computer browser, as soon as I start typing in the name of the place, Autocomplete offers work fine, and I can choose one. But when I run the application on a mobile device (Android or iPhone), I can see the autocomplete results, but nothing happens when I click them.

I found several js libraries that simplify working with the GooglePlaces Autocomplete API - I mean, with the exception of mobile devices (WorkLight / Cordova application)

I also found that some people report this problem with the corridor. Some managed to fix the problem by adding the "needclick" class to the google element, but this did not work for me.

Here is the JS library for testing: http://ubilabs.imtqy.com/geocomplete/

StackOverflow link with related problem:

can't use google autocomplete item on mobile

Does anyone have any ideas for a possible solution?

+4
source share
5 answers

I just tried it and it worked for me. This is what I did, let us know if you did something else

  • New Hybrid App Created
  • jquery.geocomplete.js common/js
  • index.html , api
  • ( )
  • Android Nexus 7 (Android 4.4.2) - .

" " , , , , .

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>
+2

click?

$( "p" ).click(function (event) {event.stopPropagation();//Do -});

+1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>event.stopImmediatePropagation demo</title>
  <style>
  p {
    height: 30px;
    width: 150px;
    background-color: #ccf;
  }
  div {
    height: 30px;
    width: 150px;
    background-color: #cfc;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>paragraph</p>
<div>division</div>

<script>
$( "p" ).click(function( event ) {
  event.stopImmediatePropagation();
});
$( "p" ).click(function( event ) {
  // This function won't be executed
  $( this ).css( "background-color", "#f00" );
});
$( "div" ).click(function( event ) {
  // This function will be executed
  $( this ).css( "background-color", "#f00" );
});
</script>

</body>
</html>
+1
source

If you are using Ionic, the problem is caused by the css attribute "event-pointer: none" set by ionicModal;

Try adding this to you css file:

.pac-container {
     pointer-events:auto;
}
+1
source

same problem.

add css code to the .scss file, but don't work anyway.

Any solution?

0
source

Source: https://habr.com/ru/post/1547660/

More articles:


All Articles