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.
1 Like
facing the same issue. Still looking for a solution.
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.
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.
> <template name="profile" >
> <input type="text" id="autocomplete" >
> </template>
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.
<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
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').
huh, i just corrected it. and tried my code again. no result. tried your Onrendered methods still no success.
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]
yes, DOM array works with autocomplete. i tested [0] after class name and it worked for single array.
If it works with [0], but not without, then itās not working with an array.
Changed it for more classes but and made[1] for including in 2 places and even [2] for including 3 places
huh, its working with [0] but not without it
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.
so is there anything helpful to serve my purposeā¦?
Iterate over the class array, initialising a new constructor each time?
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.