With all the cool trending WordPress themes out there you’ve probably come across some that have a Google map spread out across them. When scrolling over them though – that zoom effect happens and causes the user to get stuck. Poor UX. Let’s get that fixed. Here’s a video on just how to do that.
Full Video Transcript
Hey y’all welcome to another WordPress Wednesday! My name is Kori Ashton here at Webtegrity in San Antonio, TX and I don’t know about you but I’m completely frustrated about going over Google maps when you’re trying to scroll on a website and it starts zooming in an out and all of a sudden you get stuck and you don’t really know where to go. It’s very frustrating; it’s poor user experience. Let’s get that fixed! Why not?
So before I get started, I want to give a shout out to:
• WP Engine– They’re awesome when it comes to WordPress hosting.
• WP Elevation– if you’re an entrepreneur developer trying to build WordPress websites for clients, you’ve got to check out their program.
• WP 101– if you love WordPress tutorials, they’re fantastic. They’ve got some free options and a total of paid subscription that’s so worthwhile there. It’s awesome.
All right. So you’ve probably seem something like this on a Themeforest theme or on any WordPress theme for that matter where you start to scroll and they got this really cool Google map stretched out across here and it looks super slick. But as soon as you start to scroll, all of a sudden that happens? It’s really stinking annoying! So, how do we fix that?
It’s a little bit of code thats all you have to do. You’re going to add it to the iframe code that you get from Google Maps, right? So, this is the iframe code that you get. If you’re in the visual mode behind the scenes, this is what your iframe would look like. (Your Google Map.) So you’d want to toggle back to the “text” mode and come in here and you’ll see the iframe code.
In order to get that of course you just went over to Google Maps and did the ‘share’ option and the ’embed’ option. If you’re not familiar with that I’ll put the link right here to another video that I’ve done so you can figure out how to do an ’embed’ option for Google Maps. But, this scrolling effect- this zoom in zoom out effect that you want it to stop whenever they’re on your map.
All you have to do is come in here to the iframe area and paste in this little bit of “nerd code” right here. (I’ll put that in the description box below so you’d be able to just copy exactly what I have and paste it right in.) Then of course you’re going to click ‘update’. You’ll want to go view your page after the fact. Then (this is our website here) as you’re scrolling down (of course here I am- I’m scrolling down) there’s no ‘zoom effect’ taking place what so ever! I’d like to do it over here but this is not my theme so I can’t help that author. Somebody needs to! Because all they need to do is add that little bit of “nerd code” and that’ll make that happen for you.
I hope this helped! If you love WordPress please be sure to subscribe to our channel because every single Wednesday, (and sometimes in days in between) I’m releasing a video (something like this) that’s going to help you. Right now we have over one hundred videos on our channel!
Be sure to check it out and you can also find us over on Facebook.
Have a great one! We’ll see you next WordPress Wednesday!
Bye, bye y’all!
