Calling autocomplete for locations with classes


#1

Hi Everyone,
I am using this autocomplete for locations. I am currently getting values with the help of id. Now i want to use this to Multiple fields, that are on multiple forms on same page. i know a solution but for some reason its not working.
let me run you through the process i did to implement autocomplete (Hope this will help someone for installation related queries).
run this command in terminal --> meteor add mrt:googlemaps
now once project is installed we need to make a specific folder change. inside the client directory make a folder named ‘lib’. now make file named ‘googlePlaces.js’ and paste this code inside this file.

GoogleMaps.init({
‘sensor’: false, //optional
’key’: ‘your google autocomplete API Key’,
‘language’: ‘en’, //optional
’libraries’: ‘places’
});

you can get API key from here - https://developers.google.com/places/web-service/autocomplete.

now go to that input field where you need to place autocomplete in html file.

now go to client.js and add this code.

window.onload = function() {
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById(‘autocomplete’)),{types: [‘geocode’] }
);
};

and it will work.

this worked for me. but now i want to use it more fields on same page. i did this before in php by using ClassName but now i am doing same in meteor and even the main functionality stooped.

window.onload = function() { var autocomplete = new google.maps.places.Autocomplete( (document.getElementByClassName('try1')),{types: ['geocode'] } ); };

so have to use Id only. can someone suggest a way out of this.
Thanks for those who are going put any effort.


#2

facing the same issue. Still looking for a solution.


#3

I’m thinking you got lucky with using document.getElementById in the first place.

There is a big disconnect between window.onload and the availability of template DOM elements (and by “template”, I include React, Vue, etc., as well as Blaze). These elements are frequently rendered dynamically and are just not available when window.onload fires. This is why window.onload is generally not a viable technique in SPAs and shouln’t be used.

How to fix this? Show us the code/templates you’re using to generate the page you need the autocomplete on.


#4

i am using balze in front end and using routing to keep it clean.
so, only have one template there.


About ‘Window.onload’, I think it works when ever window is loaded. But meteor’s architecture makes it robust. And at the same time it gives it superpowers like updating content without need to reload window again and again.
so may be window is not needed to be loaded again. same reason why we don’t need to reload once changes are saved in file and server restarts.
This is as much as i understood. May be i am skipping some main point here. Would really appreciate if you can clear the mist of doubts around me. Thanks in advance. Cant rely on documentation for help, that almost don’t have anything useful.


#5

Can we see it?


#6
> <template name="profile" >
> <input type="text" id="autocomplete" >
> </template>

#7

Where are the classes you referred to?

Anyway, the basic principle here is to put the Google code in the template’s onRendered.

Template.profile.onRendered(function profileOnRendered() {
  const autocomplete = new google.maps.places.Autocomplete(document.getElementByClassName('try1'), { types: ['geocode'] });
});

However, even that will not work if the template contains dynamically rendered elements with the try1 class. In that situation, you will need to move the dynamic components into their own template(s) and use the onRendered in those.

Again, show us the template you’re using with the class-based approach if you’re still stuck.


#8
<template name="profile" >
<input type="text" class="try1" >
</template>

window.onload = function() { var autocomplete = new google.maps.places.Autocomplete( (document.getElementByClassName('try1')),{types: ['geocode'] } ); };

sorry i forget to add it in preformative text.So it stopped showing


#9

That should be fine (no dynamic elements).

However, I’ve just spotted a typo in your code: document.getElementByClassName('try1') should be document.getElementsByClassName('try1').


#10

huh, i just corrected it. and tried my code again. no result. tried your Onrendered methods still no success.


#11

Does google.maps.places.Autocomplete support DOM arrays (which getElementsByClassName returns)? I haven’t checked that. If you have only one class at the moment, you could test that with document.getElementsByClassName('try1')[0]


#12

yes, DOM array works with autocomplete. i tested [0] after class name and it worked for single array.


#13

If it works with [0], but not without, then it’s not working with an array.


#14

Changed it for more classes but and made[1] for including in 2 places and even [2] for including 3 places


#15

huh, its working with [0] but not without it


#16

I’ve just looked at the docs:

The Autocomplete constructor takes two arguments:

  • An HTML input element of type text. This is the input field that the autocomplete service will monitor and attach its results to.
  • An options argument…

It quite clearly states that the first argument is a text element - not an array of elements.

So, it looks like you cannot use document.getElementsByClassName to apply autocompletion to multiple elements.


#17

so is there anything helpful to serve my purpose…?


#18

Iterate over the class array, initialising a new constructor each time?


#19

actually when i used same in PHP, i just replace the getDocumentById line with passing a class in it start working itself . it never asked anything more then that. and creating a constructor each time i am not sure if that would help.