PlaceAutocompleteType: Google Maps API multiple times on a page

[aarsla]

Hello, I am trying to use two PlaceAutocompleteType fields in one modal form. However, only one of the fields is working.

There is "You have included the Google Maps API multiple times on this page. This may cause unexpected errors" message presented in firebug console.

I am using google-map-bundle dev-master (google-map ^2.0@dev).

Thanks!

[egeloen]

Thanks for reporting this issue! This is weird... I have never give a try to this specific use case (multiple places autocomplete on the same page) but in theory, this use case should be handled...

I will need to give a try to this use case and investigate.

[egeloen]

I just give a try to your issue in https://github.com/egeloen/ivory-google-map-issue-185/blob/master/index.php and it works as expected so, it should be related to something you do on your side. Can you copy/paste the way you render your autocompletes as well as the api loading?

[aarsla]

Thanks for a quick response! Autocomplete fields are called from LegFormType:

$builder->add('startLocation', 'AppBundle\Form\LocationType', [ 'label' => 'Start city' ]) ->add('endLocation', 'AppBundle\Form\LocationType', [ 'label' => 'End city' ]) ;

They are two one-to-one fields (Leg has two Locations - startLocation and endLocation)

Locations are defined in LocationFormType

$builder->add('city', PlaceAutocompleteType::class, [ 'label' => false, 'types' => [AutocompleteType::CITIES], 'attr' => [ 'style' => 'width:100%' ], ]);

and rendered as regular form fields:

{{ form_row(form.startLocation) }} {{ form_row(form.endLocation) }}

Thanks!

[egeloen]

Ok thanks, I will try to reproduce it with your informations.

[egeloen]

@aarsla I just found why you get this error when using the bundle. Basically the bundle is designed to work easily/transparently when you're using one autocomplete in a page. If you want to use multiple autocompletes on the same page you will need to do extra configuration...

The first one is to disable the automatic API loading. See https://github.com/egeloen/IvoryGoogleMapBundle/blob/master/Resources/doc/place_autocomplete.md#configure-api

Then, in your javascripts twig block add the following:

{% block javascripts %}
     {{ parent() }}
     {{ ivory_google_api([field1.vars['autocomplete'], field2.vars['autocomplete']]) }}
{% endblock %}

[aarsla]

Awesome, This does work directly on PlaceAutocompleteType and should definitely find its place in the cookbook documentation section (although maybe I have simply missed it).

One thing to note is that this will not work directly on embedded forms (as in my example):

Key "autocomplete" for array with keys "value, attr, form, id... does not exist in... _form.html.twig

unless the embedded form field is referenced:

{{ ivory_google_api([form.subform.field1.vars['autocomplete'], form.subform.field2.vars['autocomplete']]) }}

Thank you for your help again!