The recent Google Map changes have caused owners of directory sites to try and find alternatives to using Google Maps – whilst 27collective are looking into using an open source (free) map provider for the map functionality of their theme MyListing, we’ve come up with a work-around in the interim for the listing pages.

The main search map (on the explore page – as seen here on their property listing demo), for now, will need a Google Map API otherwise it will have ‘For Development Purposes’ on. Whilst it doesn’t make it unusable with this message, it doesn’t look very professional.
The API keys can be acquired easily by going here but they do require the provision of a payment method (like a credit card) as only $200 of usage is provided free of charge. Google argue that this should be plenty for the average low traffic website. But, website developers aren’t convinced and so many have asked 27collective to come up with a free alternative – which they assure us they are looking into.

In the interim, to help reduce the possibility of a massive bill, we found a work-around for the listing pages, if you should want to still include a map on those pages.
It’s not as good as using the theme’s included ‘location’ map field which will take the address/location and translate that into a map but hopefully, this instruction guide will prove useful to someone.

Step One: Activate ACF on the admin menu

The Advanced Custom Fields plugin comes with the MyListing theme – which is handy – but is hidden from the admin view by default. And so, the first step is to make it visible so we can utilise its functionality for the listing pages.

Add this line of code into the child-theme’s ‘function.php’ file to make ACF appear in the WordPress admin dashboard menu to allow us to add a new custom field.

add_filter( 'acf/settings/show_admin', '__return_true', 50 );

Step Two: Creating a custom field for the listing pages

The next step involves creating the custom field to hold the map code for the listing pages.

Create the group of fields and then a WYSIWYG editor field to hold the html code.

The field should only be visible where the post type equals ‘Listing type’.

We chose to display the field high on the edit page as we were going to have to ‘back-fill’ all current listings.

Step Three: Add the field content to the front-end listing page

The next step is to make the field show on the listing pages, front-end.

Navigate to the ‘Listing Type’ that you want to edit and go to straight to the ‘Single page’ tab. The field itself has already been created so we don’t need to make an additional field in the ‘Fields’ tab.

Where you’d like to display the map, add a static code block. We called ours Location Map, for obvious reasons, and we chose an appropriate icon.

Next, you’ll need to enter the shortcode into the content area to display the ACF Field, changing the acf_field_name to whatever you called your ACF field. Ours was location_map.

]"]

The [[:id]] is a shortcode provided by the theme which will fill in the listing ID for you when the shortcode is run.

If the field has content, it will be displayed where this static code box is placed.

Step Four: Add content to the ACF field on each listing

For this, head over to Google and search for the address or location you want on your map. By pressing the share button underneath the direction button, you will find the embed version of the map.

The code will look similar to below:

Change the width and height to your needs (percentages can be used), and copy/paste it into the TEXT tab of the field on your listing edit page.

Save the listing and your map will show on the front page.

Final note

Our client already added most listings manually for her clients anyway, so she wasn’t adverse to this administration inputting. However, if you want it to be on the front end form, it could probably be done with a bit more coding within the template files. But be aware and check it doesn’t leave your site open to injection attacks, first.
Or you could use a combination of text fields, for the user to add the longitude and latitude of the location, with the ‘static code’ box available on the ‘Single Page’ view when editing the listing types. This is where you’d add a general google map code but replace the longitude and latitude with the shortcodes for the relevant fields.