Published on Nov 29, 2018

Multiple markers on a Google map from custom field of CPT entries in Oxygen

In Australian Oxygen Users Facebook group, John asks:

Has anyone used the Google Map field from many CPT entries to place pins on a single Google Map? I've followed the instructions at WPDevDesign for a single map pin and this works really well. but wondered if this has been attempted for multiple pins from different Posts. If not, does anyone have any ideas how to do this? I'm thinking a loop to step through the CPT's grab the google map field and apply it to the map. I think I can do the loop in a Code element on the page. thoughts?

In this members-only tutorial we shall

register a `temple` Custom Post Type
attach a custom field group to the above CPT having a `location` field of type "Google Map" using Advanced Custom Fields
create a Template for the CPT archive
add a Code Block in the Template with the necessary PHP, CSS and JS to loop through all the entries of the CPT, pull the location custom field's latitude, longitude, address and have these rendered on a Google map as multiple markers.

to show a Google map with markers of the locations specified in all the CPT items.

When a marker is clicked:

Step 1

Obtain a Google Maps API key and paste it in Oxygen > Settings.

Step 2

Install and activate Custom Post Type UI.

Go to CPT UI > Add/Edit Post Types.

Add your desired post type. In this example, I have added it like so:

If you would like to display the map on the CPT archive page, scroll down to Settings section set Has Archive to True.

You may also want to set a custom archive slug.

Step 3

Install and activate ACF.

Note: I have used ACF Pro in my test site. Did not test this with the free version. I think it will work with the free version as well.

Go to Custom Fields > Add New.

Add a new field group having a location field of "Google Map" type.

Attach it to your CPT.

Step 4

Add as many CPT entries as you need.

Specify the address in the Location metabox.

Step 5

Go to Oxygen > Templates.

Add a new Template for your CPT archive.

You may have to a priority of 1 or higher if you have a generic Template that applies to all archives.

Edit it with Oxgyen.

a) Add a Section.

b) Add a Heading with your desired text ("Temples Around the World" in this example) inside the Section.

c) Add a Code Block below it.

Advanced > Size & Spacing > Width: 100%.

PHP & HTML:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $599 one-time).

Already a member? Log in below or here.