Framework7: Google Place Autocomplete API

[CarlosJimenez]

Hi
I have troubles trying to use Google Place Autocomplete API inside a form. One of the field of the form is a input type="text", that should be autocompleted.
It worked in bootstrap, but when I tried to do the same in F7 I found that input is not autocompleted.

on the form I added

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

---

In the form my field is

      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-place"></i></div>
          <div class="item-inner">
            <div class="item-title label">Lugar</div>
            <div class="item-input">
              <input id="myplace" type="text" />
            </div>
          </div>
        </div>
      </li>

---

on the javascript

$$(document).on('pageInit', function (e) {
var page = e.detail.page;
// other pages initialization
if (page.name === 'myform') {
function placeChanged() {
console.log('placeChanged');
}
var input = $$('#myplace')[0];
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', placeChanged);
}

});

First (I don't know why) my input included autocomplete="off" (google added)
I am receiving the autocomplete info, but it's not filled in the input box.

PD: I include some of your form icons in svg in case that you want to include in Framework 7

i.icon.icon-form-name2 {
width: 29px;
height: 29px;
background-image: url("data:image/svg+xml;charset=utf-8,");
}

i.icon.icon-form-email2 {
width: 29px;
height: 29px;
background-image: url('data:image/svg+xml;charset=utf-8,');
}

i.icon.icon-form-tel2 {
width: 29px;
height: 29px;
background-image: url('data:image/svg+xml;charset=utf-8,');
}

i.icon.icon-form-calendar2 {
width: 29px;
height: 29px;
background-image: url('data:image/svg+xml;charset=utf-8,');
}

i.icon.icon-form-place {
width: 29px;
height: 29px;
background-image: url('data:image/svg+xml;charset=utf-8,');
}

[nolimits4web]

I think autocomplite attribute should be "off" to disable native browser's autocomplite in favor of custom JS one by google (it is also "off" here: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete?hl=ru)

Why it is not working it is hard to say. Do you see any errors in console, or do you have a live links so i can take a look?

[CarlosJimenez]

Thank you very much for your excellent support.

You are right! autocomplete is off in the running example too. There is not error in console. But I prepared 2 sites to show the issue (f7 and bs):

http://dni-web.com/f7
(your dist example, I changed index.html (to include google api), form.html (to have one item in the form to ask the place), my-app.css (to have icon in svg format) and my-app.js (to handle form).
Go to Form page.

http://dni-web.com/bs
Really small equivalent bootstrap example that works. When you type in input box, the place is completed using Google API.

I appreciate your comments.

Best regards
Carlos

[nolimits4web]

Ok, i figured this out. The autocomplite popup just appears below F7 views and pages add this css rule:

.pac-container {
  z-index:20000;
}

[CarlosJimenez]

Great. Works perfectly.
Once again, you're the best!!

Best regards

[CarlosJimenez]

On PC works fine. the Google Popup is shown on top of F7.
But when tested in iPhone (5S with iOS 7) I cannot touch on the Google list of places.
The keyboard is open. On BS example I still can touch the Google list and select the place, but in F7 site the Google list has useless.

How can do that?

[nolimits4web]

That something wrong with events in google widget. Try to add this JS for appropriate page, or when this block appear in DOM:

$$('.pac-container').on('touchend', function(e){e.stopPropagation();})

[CarlosJimenez]

The item is now selected, but the input box is not filled with the content of Google list.
I am not familiarized with F7 source code. It's my first look on it. So maybe the next comment makes no sense:

On function handleTouchStart you fill the activeSelection. When I am typing in input box, the keyboard popup is expanded (and got the focus). Maybe is this the reason why activeSelection is false, and then the google popup is missing the touches?

        function handleTouchStart(e) {

...
if (app.device.os === 'ios') {
var selection = window.getSelection();
if (selection.rangeCount && !selection.isCollapsed) {
activeSelection = true;
return true;
}
else {
activeSelection = false;
}

[nolimits4web]

No, this part doesn't related to that. It is about when you select text on page. Try to move this fix:

$$('.pac-container').on('touchend', function(e) { 
            console.log('touchend');
            e.stopPropagation(); 
        });

To the end of page name condition, after this line: google.maps.event.addListener(autocomplete, 'place_changed', placeChanged);

[CarlosJimenez]

the console.log('touchend') is never shown.
I added also a log in touchstart and is not shown neither

it's like pac-container is not receiving touch events

[nolimits4web]

This means that on the moment when you add these listeners the '.pac-container' is not in DOM yet. So you can try to use google api's and add these listeners when this container appear in DOM or you can just try this live listener instead:

$$('body').on('touchend','.pac-container', function(e){e.stopImmediatePropagation();})

[CarlosJimenez]

Now it works!!!!
Vladimir, I cannot say how much I admire you!!!

Thanks a lot
All the best

[Isainsosa]

Hi,

I tried this solution but it does not fire the place_changed event, it makes up touching elsewhere on the screen. Can you help please?

[ganeshlore]

hi Vladimir,
i tried your solution but still not work for me. no drop down show when i build the app but its work on web browser.

CSS :

.pac-container {
  z-index:20000;
}

Google MAP JS :

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>

HTML :

   <div class="item-content">
     <div class="item-inner">
         <div class="item-input">
             <input type="text" placeholder="Select Your Location" id="rlocation" name="rlocation"> 
          </div>
      </div>
  </div>

JS :

/*
this js inside -> $$(document).on('pageInit', function (e) {
*/
var rinput = document.getElementById('rlocation') ;  

    var rautocomplete = new google.maps.places.Autocomplete(rinput, {
        types: ["geocode"]
    });

    google.maps.event.addListener(rautocomplete, 'place_changed', function() {
        var place = rautocomplete.getPlace();
        if (!place.geometry) {
            return;
        }


        var raddress = '';
        if (place.address_components) {
            raddress = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');

             var lat = place.geometry.location.lat();
             var lng = place.geometry.location.lng();  

            $("#rlocation[name=rlocation]").attr('latlng', lat+','+lng);
            console.log('latlong : '+lat+','+lng);

        }

    });

[ganeshlore]

hi CarlosJimenez,
Can You Share Your Working Code Sample Here
Thank You

[ganeshlore]

hi Guys
its Work Fine i Just Miss the Whit list the Domain in Config,xml file

<access origin="*"/>
    <!-- Added the following intents to support the removal of whitelist code from base cordova to a plugin -->
    <!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->
    <plugin name="cordova-plugin-whitelist" version="1" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>

:-)

[nive745]

Hi,
I am having issue while implementing google autocomplete. it works fine in browser but when i run app in mobile suggestion are coming but selection is not working. i am using framework7 with cordova. I tried all solution describe above but not work for me.

HTML code
<div class="inputs-list mg0 location_div">
   <div class="location">
      <i class="fa fa-map-marker location-img"></i>
      <div class="item-input">
         <input type="text" id="autocomplete" placeholder="Enter your address" onfocus="geolocate();">
      </div>
   </div>
</div>

JQUERY
function initAutocomplete() {

        // Create the autocomplete object, restricting the search to geographical
        // location types.

        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});
        // When the user selects an address from the dropdown, populate the address
        // fields in the form.

        autocomplete.addListener('place_changed', fillInAddress);
      }

function fillInAddress() {
        alert("here")
      }

      function geolocate() {
        if (navigator.geolocation) {

          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });

            autocomplete.setBounds(circle.getBounds());
          });
        }
}

[nive745]

Please give me reply

[ganeshlore]

send me your full page code
i need to understand if u call autocomplete before HTMLInputElement Appear
or not

////////////////////////////////////////////// please Check Below things
/////////////////////////////////////////////////////

CASE : 1

autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement}
*/(document.getElementById('autocomplete')),
{types: ['geocode']});

it's write code by the way

if u get this error : InvalidValueError: not an instance of HTMLInputElement

means your auto complete happen before ur input element appears

//////////////////////////////////////////////////////////////////////

CASE : 2

  in your  Config.xml  just  put

//////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

On Tue, Mar 8, 2016 at 3:24 PM, nive745 [email protected] wrote:

Please give me reply

—
Reply to this email directly or view it on GitHub
https://github.com/nolimits4web/Framework7/issues/95#issuecomment-193694399
.

_G_anesh _L_ore

[nive745]

Hi Ganeshlore,

First of all thanks for the reply.
You can check below link for html code.
http://dev.eoniansoftware.com/letshavegame_demo/www/demolink.html

when you type in location search box you can see autocomplete results appear. when i click on any places it fill up into text box for browser but its not working in mobile app.

config.xml

[ganeshlore]

fastClicks:false

On Tue, Mar 8, 2016 at 5:00 PM, nive745 [email protected] wrote:

Hi Ganeshlore,

First of all thanks for the reply.
You can check below link for html code.
http://dev.eoniansoftware.com/letshavegame_demo/www/demolink.html

when you type in location search box you can see autocomplete results
appear. when i click on any places it fill up into text box for browser but
its not working in mobile app.

config.xml
`

PlayEcology

A sample Apache Cordova application that responds to the deviceready event.

Apache Cordova Team

`

—
Reply to this email directly or view it on GitHub
https://github.com/nolimits4web/Framework7/issues/95#issuecomment-193738790
.

_G_anesh _L_ore

[nive745]

Hi Ganeshlore,

Yeah, it's working great. Thank you very much for this help. It helped me a lot.

You/'ve saved me from wasting lots of hours on this simple task.

Once again thanks for the help. I really appreciate your support.

[ganeshlore]

Happy Coding.....🙂
On Wed, 9 Mar 2016 at 2:56 PM, nive745 [email protected] wrote:

Hi Ganeshlore,

Yeah, it's working great. Thank you very much for this help. It helped me
a lot.

You/'ve saved me from wasting lots of hours on this simple task.

Once again thanks for the help. I really appreciate your support.

—
Reply to this email directly or view it on GitHub
https://github.com/nolimits4web/Framework7/issues/95#issuecomment-194202508
.

[yankopetrov]

In my case fastClicks:false was not an option.

I tried also
$$('body').on('touchend','.pac-container', function(e){e.stopImmediatePropagation();})
but when the event was triggered the box was already hidden.

So changing touchend with touchstart solve my problem.
$$('body').on('touchstart','.pac-container', function(e){e.stopImmediatePropagation();})

Now google autocomplete works fine for me.

[shirishpickup]

Even i'm banging my head on this issue. I can able to select the item on the mobile but need to tap on done button on keyboard to trigger the place_changed listener and the keyboard is still showing. Please help!!

[SnehaSSD]

@shirishpickup did you get any solution for this problem ?

[shirishpickup]

@SnehaSSD Yes i did. Which version of Angular, are you using Sneha ?

[bhupeshp]

Hi guys, I followed the above steps and still faced the same issue. Below (way 2) resolved my issue though:

way 1:Remove entire fastclick from app var myApp = new Framework7({ material: true, materialPageLoadDelay: 250, materialRipple: true, fastclick:false, });

way 2:remove fastclick only for goole suggestion area$(document).on({ 'DOMNodeInserted': function() { $('.pac-item, .pac-item span', this).addClass('no-fastclick'); } }, '.pac-container'); I prefer the second one where fastclick is removed from only suggestion area.

original answer: https://tutel.me/c/programming/questions/38367768/google+autocomplete+not+working+in+framework7

[Srijan1702]

@shirishpickup @yankopetrov

Hi, I am facing same issue. I am not able to select suggestions shown by google api on iOS only. It's working fine on android and browser. I am using Angular 4 and Ionic 3 and using Xcode9 to test builds on simulator. I have tried almost everything still no luck. Please help!!!

[shirishpickup]

Hey Srijan,

You need to do, skip click hijack

Try this.
.config(function( $mdGestureProvider ) {
$mdGestureProvider.skipClickHijack();
});

[Srijan1702]

Hi Shirish( @shirishpickup )

I am not sure where to put the code as I am new in the technology.
I have tried but it's not working, here's my code. Thank you in advance.

in Html:

  `<input id="pac-input" name="address" type="text" (keyup)="onKeyup()" [(ngModel)]="address" placeholder="Your street, building number..." class="name_txt" (click)="selectedSavedAddress = false" required />`

in ts:

ionViewDidEnter() {
    let input = document.getElementById('pac-input');
    let options = {
      types: ['geocode'], 
      componentRestrictions: {country: "SG"}
    };

    var autocomplete = new google.maps.places.Autocomplete(input, options);
     console.log(autocomplete, 'autocomplete');

    var local_this = this;
    google.maps.event.addListener(autocomplete, 'place_changed', () => {
      var place = autocomplete.getPlace();
      var address = place.formatted_address;
      var postal_code_find = _.find(place.address_components, (ac: any) => {
        return ac.types[0] === 'postal_code';
      });
      var postal_code = '';

      postal_code_find && (postal_code = postal_code_find.short_name);

      var latitude = place.geometry.location.lat();
      var longitude = place.geometry.location.lng();

      let coord = {
        lat: latitude, 
        lng: longitude
      };

      let address_data = {
        address: address,
        postal_code: postal_code || ''
      };

      local_this.extractAddressData(address_data);
      local_this.ref.detectChanges();
    });
}

onKeyup() {
    console.log('keyup');
    angular.module('**whichModuleToPutHere**', ['**what_goes_here**'])
    .config(function( $mdGestureProvider ) {
      console.log('mdGestureProvider');

      $mdGestureProvider.skipClickHijack();
  });

  }

[shirishpickup]

App.config(function($mdGestureProvider) {
$mdGestureProvider.skipClickHijack();
});

Add this to your app.js file where you define the module.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.