autocomplete google places

[bigbossmaher]

i want to use google places api with the autocomplete feature of framework7 ( https://framework7.io/docs/autocomplete.html) i mean instead of showing the results from an array i want the results of google places api how can i do it please

[tinyCoder32]

It's easy, create your input and load the API from google in the footer:

<div class="item-content ad-address-holder">
        <div class="item-inner">
            <div class="item-input">
                <input class="address-text" id="address-text" placeholder="Enter a location" type="text">
            </div>
        </div>
    </div>

<script defer src="https://maps.googleapis.com/maps/api/js?key=[YOUR-API-KEY-HERE]&callback=initMap&libraries=places" type="text/javascript"></script>

And create your initMap function:

window.initMap = function() {
  var acInputs = document.getElementById("address-input");
  var autocomplete = new google.maps.places.Autocomplete(acInputs);
  google.maps.event.addListener(autocomplete, 'place_changed', function() {});
}

Works great.

[bigbossmaher]

so i can now use the onClose and onOpen methods ?

[tinyCoder32]

No man you can't, because in this case it is a Google plugin NOT a Framework7 DropDown plugin. Instead, you can use:

$$('#address-input').on('input', function() {
    // do something
});

This fires your code when the user types inside the input (= the dropdown is open), and it is not the best answer of course but this is all I know, i'm sorry.

Good luck.

[bigbossmaher]

i use for the moment focusin and blur events so i know when the user entred and left the input box . is there any way to use the https://framework7.io/docs/autocomplete.html with google places api ? so i can use onClose and onOpen ?

[tinyCoder32]

Yes of course there is, I already built a function for YOUTUBE search, you can find it here and modify it to GOOGLE PLACES: https://codepen.io/tinyCoder/pen/WoMXEz

An example for the link for google places json is: https://maps.googleapis.com/maps/api/place/textsearch/xml?query=restaurants+in+Sydney&key=YOUR_API_KEY

[bigbossmaher]

thanks for you answer but it seems so complicated for me this is my javascript code for the current autocomplete var optionsT = { componentRestrictions: {country: "tn"} }; $$('body').on('touchstart','.pac-container', function(e){e.stopImmediatePropagation();}) var acInputs = document.getElementById("myplace"); var autocomplete = new google.maps.places.Autocomplete(acInputs, optionsT); google.maps.event.addListener(autocomplete, 'place_changed', function() { var place = autocomplete.getPlace(); map.animateCamera({ 'target': new plugin.google.maps.LatLng(place.geometry.location.lat(),place.geometry.location.lng()), 'tilt': 60, 'zoom': 15, 'bearing': 140 }); });

the google api : <script defer src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&libraries=places" type="text/javascript"></script>

HTML : <input id="myplace" type="text" placeholder="garer prer de"> could yopu please help me to implemet it . because this is what i was looking for along time

[tinyCoder32]

I'm sorry man, I spend a couple of hours on it and still need working, I don't have more time for it, check this page for more information: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

[bigbossmaher]

yes i know , but i'm using the cordova-plugin-googlemaps plugin not javascript google maps api. ( i use only places api to get coords of places and show them on the map ) can i give you the full project with intel XDK i really need this one . i'm a newbie

[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.