Man, you explain things SO clearly and easily, that I can actually watch a 20+ minute video all the way through, not tune out or disengage, and actually retain everything after the fact. I felt like I watched it, and understood, instead of having to just pause and follow along the whole time. Earned my sub with bells on!
The explanation is awesome and super easy to follow along - thanks!! Was in the process of copying this, but than I discovered the No Code Flow Dynamic Map app 🤠
It worked thanks! I'm building a Real Estate site. Now how to I create a map that integrates all the CMS listings in to one map? I want my users to then click on each map pointer to pull up each listing. Thanks
This is SO helpful. Quick question: I tried adjusting the zoom from 15 to 12, but now the marker is no longer accurate (it's consistently north of where it should be across all of my CMS items). Any chance you know why this would be?
You just earned yourself a subscriber. Awesome tutorial. BTW do you know of a way to fade the edges of the map to transparent so it blends into the background of the page? Been looking everywhere to try to figure out that one. May not be possible.
Totally agreed, this tutorial is AWESOME! To help you out Wyatt - If your background is a single colour you could place an absolutely positioned div block on top of the map embed, give it a linear gradient background transitioning from transparent to the background colour, so the map will look like it's fading into the page background
Hi everyone, I am experiencing a similar issue with loading image markers on my site. There are no error messages or any indications, but the markers do not load most of the time (occasionally do). I don't know where the problem could be. Thanks for advices
Is there a way to utilize this method with a collection list on a single page with multiple maps? Would you simply embed the code in the collection item in the designer, or would you still embed in the body, then add multiple map references in the JavaScript? I sure appreciate this video!!
This is great! Thank you! I'm having a small problem where the HTML embed is pulling from the wrong item in the list.... specifically the item right before the one I'm using. Do you have any suggestions as to why this might be happening in Webflow? Thank you!
Hello, I have an issue with the code: map space is blank. To double check I added the webflow maps plugin, typed a city and the map showed. So the API key is fine. I then added a fixed address at the top of your code (avoiding anything could be wrong with the CMS data), The map refuses to apear. Wold you have (a) another idea what should be checked and b. maybe the full code source inside Google? Thanks Kyle.
@@ryanfisler8030 hey man, was having the same problem i checked my logs and saw the error you'll have to wrap the script with a document.ready so the script loads after the dom is ready
how do you add the distance matrix API to this? i just want my clients customers to be able to compare their work address to the address being displayed....
Although the map is working, but location didn't appear with the image as a marker... I got the following error message : Geocode was not successful for the following reason: REQUEST_DENIED All 3 API are enabled, the API key correct.. I don't understand where this come from.
Hey - sorry you’re having issues. For Google Cloud issues, I’ve actually found their live chat support to be extremely responsive and helpful. They are able to peek into your situation and diagnose really quickly. They helped me in no time. So honestly, since you’re getting a error notification from Google, the support with Google Cloud is probably your best resource. I don’t mean pass you off to someone else - but want to point you in the best direction! Hope that helps!
@@nocodecollab Hello @Charles Collin @No Code Collab did you find from where your problem were coming? I'm having the same issue and as I am not in a paid plan on Google Cloud Platform I can not access to their tchat... Thanks a lot for your help, have a nice day!
For anyone having this issue, you need to have a billing plan for the Geocode API to work. You won't be charged but you do need to have it. Took me a minute to figure that out! hopefully this helps someone else :)
Does someone know how to add this into my homepage? I have a one-pager and having a collection page doesn't work for me, I tried hard coding the address and the name but didn't seem to work, maybe it's some sort of syntax error... thanks in advance. P.D. this is amazing great tutorial.
For anyone trying to do this, I realized I had to name in my "normal" page the same id and everything just worked the same "hard coding" the address and name. :)
Unfortunately no. This is one location per map. I have heard of someone doing multiple - but don’t think they did a tutorial. So I know it’s possible, but this code wouldn’t get it done.
I came to revisit this, because I was having problems with my alternative implementation that I recently switched too, as ever since they updated to the new Google Maps API V3, this solution no longer works. I keep getting a browser error that says "ZERO_RESULTS". However that alternative, had its own issues, so I was trying to go for a more "raw" implementation, and yeah, I just cannot make this work with the new Google Maps API. Also, there's almost no way to import the JSON now...I found one exceeeedingly hacky method, but other then that, I cannot believe how badly Google has beat up their own product. Wow. Would love to see an update to this video on how to implement (if even possible) with the new Google Maps API.
It seems Google Maps have been tightening up lately. I’ve made the switch to Mapbox, which felt like a learning curve at first but I’m please with the process and unique maps! Free plan too.
I'm getting an error, ```9001-collins-ave-s-1005:175 Uncaught ReferenceError: google is not defined at 9001-collins-ave-s-1005:175:1``` This happened because I did not realize that you need: 1.) The div element with an id map-container 2.) The embed element above it. I didn't realize that the embed element actually refers to the map-container, they're separate, which is very odd to me. I skipped over that. Thanks for a great video!
