Google Maps are changing the way we see the world. Lets change the way we look at Google Maps
Google Maps are a perfect match when you are dealing with location based apps. In this article we will learn to integrate the Google Maps api and Google Places api in our Ionic App and look at the solution to long press issue that Ionic suffers from and how to resolve that.
Get Ionic running:
Create a new Ionic Application:
Get list of all the platforms added in your application:
you will see the list of all the installed platforms
Add Android and iOS platforms to you app:
Following plugins will be installed once any platform is added:
ng-cordova is an AngularJs Service which integrates cordova plugins into IONIC Applications. Download ng-cordova.master.zip from here and place the ng-cordova.min.js in the www/js. ngCordova depends on AngularJS . In your index.html , place ng-cordova.min.js before cordova.js and after AngularJs/ Ionic files.
Inject ngCordova as an angular dependency in your angular module
Test the app on the browser
Lets add google places api in your index.html
index.html
app.js
style.css
Now run the app on the browser:
You will see it work as expected in the browser.
Now run the app on Android Device:
Issue with Selecting Auto Complete suggestions
All Set, you might assume. There is a problem though, you will have to long press the autocomplete option to actually get it selected. The issue is that Gmap dynamically adds elements that need the data-tap-disabled property, so you'll have to manually add the property after google has added these elements to the dom.
To get it working on the Android device you need to add the following function in your controller:
add disableTap() function in the input type
Now run the App on the Android Phone. Voila!
For live demo please visit this github link.
