Map Results in Oxygen with WP Grid Builder

You can now show results from an Oxygen repeater on a Google Maps element thanks to the WP Grid Builder map facets addon. Using the ACF map field, WP Grid Builder plots listings on a map that has a clickable popup with information about the post.
All code used in the video: permaslug.com/map-results-in-...
Learn more about my Oxygen Builder course here: permaslug.com/ultimate-oxygen...
Visit the premium forums: permaslug.com/forums/
-Connect with me!-
Facebook: / permaslug
Twitter: / permaslug
Website: permaslug.com

[@jackwalsh6487]

Excellent tutorial! Thanks and have a Happy New Year!

[@Julesbrookingtv]

Thank you so much. Never invested a hundret dollars better than with you. Keep up the great work!

[@bikimel-directes]

Hello Jonathan! Although this is an old video, I am using this video right now, for bricks! thank you!

[@Permaslug]

Glad I could help!

[@bikimel-directes]

@Permaslug jonathan! Did you go to wordcamp athens maybe i saw you on the typpgraphy workshop?

[@ilhadourada]

Fantastic, thank you so much for this tutorial!!

[@DavideDelGatto]

Super helpful!! 👌🏻

[@LoversTravelers]

Nice! Is it possible to have the "Search as I move the map" option enabled by default?

[@peterbradney9159]

Great video, I was wondering if you had worked with the leaflet map as shown on their demo site. Do you know if this is as easy to setup. I'm trying to do a directory site in the UK. Just want to search location and business category. Interested in auto surgest for location and category/sub category for the business listing. I'm not a developer, but will need to know what to ask for. Any help would be much appreciated.

[@christineweeks7046]

Thanks for this. I'm trying to figure out how to modify the code you linked on your site so that it only applies for one facet slug (or post type), so that I can have several different kinds of map facets on my site with different info shown.

[@PAULMEYERSNorthBay]

Hey Jonathan - great video. Can this be done using Bricks Builder? I'm having a difficult time getting it to work?

[@michelecardinali2988]

Very useful! i followed all the steps but if i transform the created section into a reusable element to insert the cards and the map in the homepage, the map doesn't work and doesn't show the hotspots. How do I get it to work on the homepage?

[@charliebarks]

Hey Jonathan, I picked up WP Grid Builder to test and I am wondering if we can use the Listing Cards from Grid Builder in place of the Oxygen Repeater Element? Is there a reason that you used the Oxygen Repeater instead of the GB Cards? just curious as they seem to have those really nice looking cards.

[@tecologygroup]

Hi Jonathan, do you know if there is a way to automatically add the latitude and longitude to WP GridBuilder via WP All Import Pro or a similar solution? This looks great, but the manual input of each address to the ACF Google Map meta field would be hard to do at scale, say for hundred or thosands of ACF posts?

[@JaclynBrandt]

Jonathan, this is great - I went through all of this. But I am not using Oxygen. I am having a hard time understanding how the Custom Field (location) connects to the actual post.

[@kotkotan]

How to show boxes with location without creating Template? I need exactly what you did but only on one page! Thanks!

[@martijns.7029]

Great! But how to build this nowadays with GP / Gutenberg ?

[@maliktanveerdhool]

Grid is showing in oxygen from grid builder plugin? Because I didn't see such option in repeater

[@zakirfaizal6321]

If you built this for a client would you have them give you a google map API key or would you put your account API key into it?

[@ChakritTansakul]

Hi. Great tutorial! Do you know any plugins that work like a form that allows users to put markers on google map and return the marker's location or vice versa?

[@Permaslug]

Thanks! I think that could be done with any plugin that can do front end posting such as gravity forms or ACF Extended in combination with this map facet. Can you describe your specific need? I will consider making a tutorial on it if i can

[@ChakritTansakul]

@@Permaslug Hi Thank you for the reply. It's a contact form but with a field that asks for client's location.
- Simple text field isn't accurate enough as they could insert anything there and usually need a real person to contact them to confirm their address again
- Asking for their coordinates is too hard for them and take steps to get the value
It would be nice if there's a google map in a form that allows clients to click or drop pin and returns coordinates to the web owner as part of a form entry and if the form can validate if client's address is in service area would be extremely useful.

[@roseking03]

@@ChakritTansakul you can achieve this with ACF on the front end!

[@bluefuzecom]

you mentioned some code from Mike, but I don't see that anywhere. Can you share that, I could use it! Thanks :)

[@MDWJackson]

Great tutorial. I am just stuck with the Repeater isn't connecting/updating the results page. I didn't do the CPT UI, so wonder if that is the problem? I have categories Like Australia and then child ones like New South Wales, but when on Australia Category page nothing changes.

[@MDWJackson]

Ahhh. Since this one there is now an update in Oxygen and WP Grid Builder. I can now use the Facet and Grid oxygen module and then you select which facet will link to what repeater. Just leaving this up for others.
Edit template -> Add Element -> Facet -> select Facet and Repeater.

[@jahiralam7542]

My repeater locations aren't changing according to category selection. Can you help?

[@alexander-van-aken]

Which type of API for Google maps is needed? I have Javascript MAPS API enabled. I keep getting the error when entering a map location even though I entered the API correctly. On the Google dev console I see a green icon in front of the API key. My project has a correct billing account set, but the API key is restricted to the test server location like *domain.com/* and *domain.testdomain.com/*

[@alexander-van-aken]

I got it to work. Console throws an error and it seems that Places API is needed while I had javascript map API enabled only. I've kept the above restriction for the domain name and that works.

[@saroule]

Still usefull for oxygen… this builder isn't still dead.

[@erwanmanchec5833]

what is the code use for the market content ?

[@edgeorge54]

I have a question, is it possible to link the results in the repeater with the pins on the map Eg: When I hover over a result in the repeater it makes a pin on the map move to see which pin is related to the one I am hovering over...?
Fantastic video, this has been a real lifesaver for me, thanks so much!

[@PixelAttack]

interested in found solution if any

[@edgarssva6359]

code from video 23:41. window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit );
function onInit( wpgb ) {
console.log( 'instance', wpgb.instance );
wpgb.facets.on( 'appended', onAppended );
}
function onAppended ( posts ) {
posts.forEach( animate );
}
function animate( post, index ) {
post.style.opacity = 0;
setTimeout( function() {
requestAnimationFrame( function() {
post.removeAttribute( 'style' );
post.classList.add( 'post-animation' );
});
}, index * 00);
}