worked for the first time, after i refreshed it didn't work. I had Google Maps JavaScript API has been loaded directly without loading=async and InvalidValueError: initMap is not a function. Do you think this one causing the failure?
Here's what GPT says: Yes, it is likely that the issue is related to the way the Google Maps JavaScript API is being loaded and the error with `initMap` not being recognized as a function. Here are some key points to check and possible fixes: 1. **Missing `async` or `defer` in the script tag**: If the script for the Google Maps API is not loaded asynchronously or deferred, it might block other scripts from executing properly, especially if the DOM hasn’t fully loaded yet. Make sure you're using `defer` or `async` attributes in the script tag for loading Google Maps API to avoid any blocking issues: ```html ``` This ensures the script loads asynchronously without blocking other parts of the page and that the `initMap` function is called only after the script is loaded. 2. **Ensure `initMap` is globally accessible**: If `initMap` is defined inside a function or block scope, it might not be accessible globally when the Google Maps script calls it. Make sure that `initMap` is defined in the global scope like this: ```javascript function initMap() { // Your map initialization code } ``` 3. **Error with `InvalidValueError: initMap is not a function`**: This error suggests that Google Maps API is trying to call `initMap` but cannot find it. This might happen if: - The script containing `initMap` is not properly loaded or defined. - There’s a typo in the function name or the callback parameter in the API script. 4. **Check for refresh timing**: Sometimes, if the API is loaded directly without async or defer, refreshing the page might cause the API to try and call the `initMap` function before it is defined. As a result, it works the first time (if the timing happens to be correct) but fails on subsequent reloads. Try adding `async` or `defer`, and make sure `initMap` is in the global scope. This should resolve the issue. Let me know how it goes!
Great video, thanks! Is this places API free to use? And are there any usage limits? The Google developer docs are confusing - some autocomplete stuff is listed as free (0.00 / request) while others are paid. Not sure which is which.
The Google Places API's autocomplete service provides up to 5 suggested places by default. This is a standard design choice made by Google to optimize the user experience, ensuring a balance between providing enough options and keeping the list manageable for users. Can You Modify the Number of Suggestions? Unfortunately, as of the current API design, there is no direct way to change the number of suggestions returned by the Places Autocomplete API. Google does not provide a parameter to adjust the number of results returned by the autocomplete service. Workarounds While you can't directly control the number of suggestions, you can manipulate the input in the following ways to potentially influence the results: Restricting Results by Type: You can narrow down the results by specifying the types of places you're interested in (e.g., geocode, address, establishment, etc.). This won't change the number of results but can filter them more specifically to your needs. Using Location and Radius: You can set a location and radius to limit the search area, which might help in getting more relevant suggestions within a specific area. Session Tokens: Use session tokens to group the same user's queries, which can help improve the relevance of the suggestions provided.
I get a browser console error that says "google is not defined" and points to the line in your body code that initializes "var autocomplete = new google.maps......" Any ideas?
I figured it out. In the Head code I removed any mention of async and also removed the callback. Works perfectly now. I'm using Carrd as a landing page builder fyi.
I wish! I'm not sure how you would target the Typebot input field and load the Google Places Autocomplete Library so it can return suggestions. I think it's a bit of a stretch, but I'm open to ideas 🙂
@@NeferLopez I am trying, even though I got an API key, I used that API key in my code but their is an error when I console the error it is about billing process.
Well done for providing a simplest solution my friend...
Thanks pal, very easy and simple to understand tutorial. :)
You're welcome!
This is so amazing, thank you so much!
Glad you like it!
worked for the first time, after i refreshed it didn't work. I had Google Maps JavaScript API has been loaded directly without loading=async and InvalidValueError: initMap is not a function. Do you think this one causing the failure?
Here's what GPT says:
Yes, it is likely that the issue is related to the way the Google Maps JavaScript API is being loaded and the error with `initMap` not being recognized as a function.
Here are some key points to check and possible fixes:
1. **Missing `async` or `defer` in the script tag**:
If the script for the Google Maps API is not loaded asynchronously or deferred, it might block other scripts from executing properly, especially if the DOM hasn’t fully loaded yet. Make sure you're using `defer` or `async` attributes in the script tag for loading Google Maps API to avoid any blocking issues:
```html
```
This ensures the script loads asynchronously without blocking other parts of the page and that the `initMap` function is called only after the script is loaded.
2. **Ensure `initMap` is globally accessible**:
If `initMap` is defined inside a function or block scope, it might not be accessible globally when the Google Maps script calls it. Make sure that `initMap` is defined in the global scope like this:
```javascript
function initMap() {
// Your map initialization code
}
```
3. **Error with `InvalidValueError: initMap is not a function`**:
This error suggests that Google Maps API is trying to call `initMap` but cannot find it. This might happen if:
- The script containing `initMap` is not properly loaded or defined.
- There’s a typo in the function name or the callback parameter in the API script.
4. **Check for refresh timing**:
Sometimes, if the API is loaded directly without async or defer, refreshing the page might cause the API to try and call the `initMap` function before it is defined. As a result, it works the first time (if the timing happens to be correct) but fails on subsequent reloads.
Try adding `async` or `defer`, and make sure `initMap` is in the global scope. This should resolve the issue. Let me know how it goes!
Been trying to implement this but couldn't figure it out. Won't mind you helping out. Thanks
You're welcome!
@@NeferLopez can you help out please?
I need to fetch current location where my website is loading which api of google needs to be used.
Google Maps Geolocation API
Great video, thanks! Is this places API free to use? And are there any usage limits? The Google developer docs are confusing - some autocomplete stuff is listed as free (0.00 / request) while others are paid. Not sure which is which.
It's paid, but Google offers a free monthly credit based on generous usage limits.
Hi Nefer , why the number of autosuggested places is only either 5 or less than 5 ?
The Google Places API's autocomplete service provides up to 5 suggested places by default. This is a standard design choice made by Google to optimize the user experience, ensuring a balance between providing enough options and keeping the list manageable for users.
Can You Modify the Number of Suggestions?
Unfortunately, as of the current API design, there is no direct way to change the number of suggestions returned by the Places Autocomplete API. Google does not provide a parameter to adjust the number of results returned by the autocomplete service.
Workarounds
While you can't directly control the number of suggestions, you can manipulate the input in the following ways to potentially influence the results:
Restricting Results by Type: You can narrow down the results by specifying the types of places you're interested in (e.g., geocode, address, establishment, etc.). This won't change the number of results but can filter them more specifically to your needs.
Using Location and Radius: You can set a location and radius to limit the search area, which might help in getting more relevant suggestions within a specific area.
Session Tokens: Use session tokens to group the same user's queries, which can help improve the relevance of the suggestions provided.
Awesome Merci !!! 🙂
My pleasure!
I get a browser console error that says "google is not defined" and points to the line in your body code that initializes "var autocomplete = new google.maps......" Any ideas?
I figured it out. In the Head code I removed any mention of async and also removed the callback. Works perfectly now. I'm using Carrd as a landing page builder fyi.
Awesome! Thanks for sharing your solution :)
Very Wondurfull explanation video bro. Is there is any price details for using that api?
Thank you! Prices vary, but at the moment, you get $200 monthly credits for free (mapsplatform.google.com/pricing/)
How many amount will be for how many request ? and where i can see it ?
You can get more info here: mapsplatform.google.com/pricing/
Great info, thanks. Would this work with Elementor?
I don't see why you couldn't create this with Elementor :)
Hi. How to implement this in wordpress ?
Not sure. Have you considered searching for a plugin?
Awesome! Mate do you think it is possible to somehow use this in a Typebot text field?
I wish! I'm not sure how you would target the Typebot input field and load the Google Places Autocomplete Library so it can return suggestions. I think it's a bit of a stretch, but I'm open to ideas 🙂
Amazing! does it work only for USA Countries!?
It sure does 🙂
Would this work with React?
I imagine React would have a component to help you connect with Autocomplete API. Have you tried looking at the docs?
hyee i have tried this but why when i try to search something its error like This page can't load Google Maps correctly.
Do you own this website?
Make sure to activate your API key and check API restrictions.
@@NeferLopez i do, but i think mistake from billing section urgh
without adding billing account, I can't get google API?
Most likely.
no you cannot
can we get google places api key free?
Yes, you get a certain amount of free API calls in the free tier.
@@NeferLopez I am trying, even though I got an API key, I used that API key in my code but their is an error when I console the error it is about billing process.
But i Dont have card and any payment method
Have you tried another solution?
is it a paid API or Open Source ?
Google gives you a generous amount of free monthly credits. Check out their pricing page for the free credit amount.