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 (one-time payment for lifetime access).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: