CODEWITHSUNDEEP
cordovagoogle-mapsionic-frameworkgoogle-places-apicordova-plugins
LearnToLive
LearnToLive

Reputation: 501

Using cordova google maps plugin and google places api together

I am trying to build an app using Ionic + Cordova. I want to show a map in my app. I am using cordova google maps plugin for this and I am able to successfully render the map. Now what I want to do is place a search box on top the map. The search should show place suggestions close to the user's current location when user starts typing.

I use the below code to add search box on the top of the map:

<div style="width:100%;height:400px" id="map_canvas">
     <div id="searchBox">
        <input type="text" id="query" size="30" />            
     </div>
 </div>

In my controller, I use google places autocomplete service to get a list of places close to user's current location. It does show the list of places in the drop down when I start typing. 

   var input = document.getElementById('query');
   var autocomplete = new google.maps.places.Autocomplete(input);

However I am not able to select the options from the drop-down list. It keeps on moving the map in the background.

I tried setting the below property

map.setClickable( false )

However that makes the map fixed. I dont want the map to be fixed and user should be able to move the map around if he wishes so.

I also want to pass on the location selected in the drop down to the map. I want to use this information to add a marker to the map. I am struggling to get this working.

Has anybody been able to get this working? If yes, any pointers or sample code would be helpful.

Note : I am able to get it working when using google maps api + google places api. I want to use the cordova google maps plugin as I hear its more performant compared to directly using the google maps api.

Regards

Upvotes: 1

Views: 4663

Answers (2)

telhar
telhar

Reputation: 106

Using the stock google autocomplete is a problem if you're using the plugin, as the results are tacked onto the DOM, and can have unpredictable results visually.

I found that using the autocomplete service, and handle all the dropdown result parsing etc to be easier.

With ionic, you can use a plugin like https://github.com/israelidanny/ion-google-place or look at http://devfanaticblog.com/google-places-autocomplete-with-ionic-framework/ which has sample code in codepen

There is a plugin that I found to be great, but I can't find the link to it.

Upvotes: 4

Joerg
Joerg

Reputation: 3101

You can do it this way (I use jQuery):

$("#query").on("blur", function () {
            map.setClickable(true);
        }).on("focus", function () {
            map.setClickable(false);
        }).on("keyup", function () {
            event.stopPropagation();
            event.preventDefault();
            // searching
        });

Another point: The maps plugin supports geocoding, have a look at the docs: https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Geocoder

Upvotes: 0

Related Questions