Custom Google Maps with Webflow CMS Items

[@PeterRychlik]

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!

[@nocodecollab]

Thank you!!

[@josephswiger1811]

Is there a way to display all your locations and showcase all the locations with a hover reviel to show location info?

[@nooksweetco]

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

[@rechnerNEW]

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 🤠

[@tomvoltz7506]

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.

[@tomvoltz7506]

Sorted it. I had forgotten width + height dimensions in the div. Thanks for the great code!

[@ryanfisler8030]

I have the same problem

[@ryanfisler8030]

can you explain in more detail how the weight + height dimensions in the div can be changed to fix this?

[@ryanfisler8030]

I changed the size to 40 rem 30 rem like the video and still blank where map is supposed to be

[@sheddy845]

@@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

[@magic_miles]

Great for single locations on a CMS template page - is there a way to implement a map with multiple locations populated by Webflow CMS?

[@nocodecollab]

There is a new Jetboost feature that does maps - as well as a tool called No Code Maps App. Those should be able to knock that out for you.

[@clarkbeggs4633]

Does anyone know if latitude/longitude coordinates work for the map address?

[@aleksandardumic253]

Hi bro, did you get answer?

[@edijsbergs966]

Is there a way to add moultiple pins for that one single map also pulled from cms location.

[@nocodecollab]

Haven't tried this yet - but this tool might get the job done... www.nocodemapapp.com/

[@jackmolloy5945]

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?

[@realguitarshredder]

so does this work for multiple locations at the same time. say if I have three addresses will it show three location pins?

[@nocodecollab]

You might give this app a try: www.nocodemapapp.com/

[@adambennett8824]

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....

[@wyattbillingsley6844]

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.

[@WilliamSayer]

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

[@kasanwebdesign-grafik-foto2593]

You're my superhero. Many thanks for the great tutorial and the code! Best regards from Switzerland.

[@designerfilipdoskocil]

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

[@zachariasdahl6442]

Hello, Love the video. Is there any possibility to change the adress code so it pulls all cms adresses and show them on one map?

[@tim_sek]

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!

[@adambennett8824]

is it possible to add a "Find a location near me"??

[@maneeshachaudhary2085]

Would this set up work for multiple addresses on one map?

[@nocodecollab]

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.

[@DanielDesigners]

This would cool to see next! But thanks for the content nevertheless 😍

[@Carsto100]

Is there any way to get all of your CMS markers to show up on one single map?

[@nocodecollab]

Might be worth looking into this : www.nocodemapapp.com/

[@bryanlorin6092]

Hello, I am currently creating a real estate agency site... I would like to know how I could make a search bar linked to a map on webflow?

[@SiteGrow-ix9wy]

This was extremely helpful! Thanks alot!

[@nocodecollab]

Glad it helped!

[@gouisedeau]

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.

[@nocodecollab]

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!

[@paularnould3580]

@@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!

[@andreamorgan.]

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 :)

[@RandallJohnson-e9l]

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!!

[@gouisedeau]

Once again, you save the day! Thanks for this tuto Kyle!

[@nocodecollab]

🤘🤘🤘

[@HarshVerma.Growth]

Hi can you have something on Store Locator in Webflow. Not the third-party tool. Please share if possible.

[@ryanfisler8030]

Any idea why I would be getting blank space instead of a map after following these directions?

[@isaacsoler9300]

Nice tutorial! Thank you for sharing this

[@davemorgang]

This is a great tool! Thanks for sharing!

[@daniellebelvoix8668]

For some reason this doesn’t work on my site… is someone able to assist?

[@rebeccalowe9061]

Amazing! Just what I needed!

[@CarlosAlbertoVelascoDuSolier]

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.

[@CarlosAlbertoVelascoDuSolier]

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. :)

[@alejandrasalgado3378]

Thank you for sharing this very useful!

[@nocodecollab]

👍👍👍

[@PeterRychlik]

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.

[@ICTOceania]

I'm having the same issues. Any solution?

[@PeterRychlik]

@@ICTOceania Not yet -- it's been really frustrating trying to find a solution for this. Google has been really beating up their brand lately.

[@ICTOceania]

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.

[@RandallJohnson-e9l]

liked, sub'ed great work. much appreciated!

[@SeanWald0]

jomboy of webflow! lol u guys sound the same!

[@josephbates9917]

NICE!

[@nocodecollab]

Thanks!

[@NathanWindsorMusic]

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!