Question: 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

Answer: 
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.
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>