map search autocomplete

[Jo]

Hello,
I'm trying to implement the autocomplete feature when I search a map in my app.

I tried using the following:
http://ubilabs.github.io/geocomplete/...

I did:

function initialize_mymap() {
var map = Apperyio("my_map").gmap;
Apperyio('my_search').geocomplete({
map: map
});
}

but get the error:

Uncaught TypeError: Cannot read property 'Autocomplete' of undefined GeoComplete.js:8

Where GeoComplete.js is my asset file that contains the min.js version of the file from:

http://ubilabs.github.io/geocomplete/

I am new to appery and javascripting in general, so perhaps this is a beginners error, but could someone please let me know what I am doing wrong?

Is there an easier alternative to achieving the autocomplete feature ?

Thanks in advance.
-Jo

[Jo]

I also tried:

function initialize_mymap() {
Apperyio('my_search').geocomplete();
}

and

function initialize_mymap() {
Appery('my_search').geocomplete();
}

but no dice.

This leads to another question - when do I use Apperyio('widget_name') and when do I use Appery('widget_name')

Thanks.
-Jo

[Yurii Orishchuk]

Hi Jo.

Please follow these steps:

1 Open "App settings".

2 Fill "User-defined resources" input by following url: http://prntscr.com/38b00k/direct

pre

http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places

/pre

That's all.

Regards.

[Jo]

Hi Yurii,
Thanks for your reply. IT is working now!!

However, my console shows this error:

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

So, it looks like without loading the apis, my autocomplete feature will not work and when I load the library, it gets loaded multiple times.

[Jo]

One more piece of information that may be relevant :

I have two pages in my app, each with a separate map and separate search box and I call the

Appery('my_search').geocomplete(); in one page and

Appery('my_search2').geocomplete(); in my second page.

Thanks for looking.
-Jo

[Yurii Orishchuk]

Hi Jo,

That's no error, just warning about two same scripts included into document.

Unfortunatly, currently there is no good way to fix it.

If you want, you can remove "https://maps.google.com/maps/api/js?s..." script from page source.

But you should now - this should be done only for production build.

See deatails about it here: http://devcenter.appery.io/tutorials/...

Regards.

[Jo]

Hi yurii,
Thanks for your reply.

I am trying to simplify my search box by following this:

https://developers.google.com/maps/do...

and not using any additional javascript libraries.

I added this to App Settings-User defined resources:
https://maps.googleapis.com/maps/api/...

and then I added the initialize() function mentioned on the webpage, modifying it by giving my searchbox

code

var input = /** @type {HTMLInputElement} */(
Appery('my_input'));//my_input is a text input box I added to my page
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));

/code

I also tried this with a search box on my app page.

But nothing seems to happen with it.

Could you tell me what I may be doing wrong or if it is even possible to get something like the link above in an app?
Many thanks.
-Jo
PS: The link to my app is here:
http://appery.io/app/view/ccf039f6-83...

I guess you can view the source to see what I've done. If there is anything else that may be required, please let me know.

[Yurii Orishchuk]

Hi Jo,

See next problem in your code:

You need replace following code with:

pre

var input = /** @type {HTMLInputElement} */(
Appery('my_input'));//my_input is a text input box I added to my page

/pre

with following code:

pre

//Note: you need replace "my_input" with your input component name.
var input = Appery('my_input')[0];

/pre

Regards.

[Jo]

Awesome! IT works now..
Thanks a lot!

One last question on this thread - is there any advantage in using the map widget that Appery provides?
I found that I have better control of the map if I get the map object from the "geocomplete" plugin, instead of using the default map widget of Appery. Hence, right now, I am leaving the mobilecontainer div empty and filling it with the map I get from "geocomplete". One other advantage I found with this approach is that I can fill the entire "mobilecontainer" container with my map. I couldn't figure out how to do it with the Appery map widget, even with CSS.
So, if there is no advantage in using the Appery map widget, I am planning to use the map I extract from "geocomplete"

Thanks again.
-Jo

[Yurii Orishchuk]

Jo,

Buildin map component is easy to use in common usecases. But if you need more functionality and flexibility you can use your own implementation.

Regards.