The Google map API is fairly easy to work with, and after trying a few map plugins for WordPress, I gave up and used metabox.io to store service area cities to display on a map. If you know of a plugin that accomplishes this and scales responsively and fits the bounds of the map to the markers displayed, please let me know.

Metabox has a map element that really helped in this project. It uses the Google maps API to autocomplete address lookups and return the lat/lng coordinates for the address. I'm using the post title as the tooltip display on the frontend, and the custom fields contain the address and coordinate fields. The code below loops through the service city post types and prepares the array of information to feed to the maps API.

Once the array is formatted correctly, it is JSON encoded and used in the maps API. The official docs explain Google Maps markers in more detail.

Now it easy to add new service cities and this could easily be expanded to include more info in the tooltip popup to make this function similar to a store locator plugin.

By using fitBounds and panToBounds, the map will always be the correct scale and centered for any screen size.

To use this in Oxygen:

  • add both code sections to a code block
  • make sure the maps API key is set
  • make sure you are selecting the right ID here: (document.getElementById('section-map')
  • make sure all post type and custom field IDs match what you have set up in metabox

Good luck!

This is another example of a custom loop to display upcoming events. Using Metabox made handling the input of the custom fields very easy with the date picker element. A few interesting things I ran into on this project:

The date comparison that filters post output to only show upcoming and not past events didn't work until I put the date into a variable outside of the $args array? Not sure why...

Your server may not be in the same time zone as your client. In my case, the server was in Pacific and the client in Mountain. Took me a bit to realize that was the reason some posts weren't displaying as expected. Using date_default_timezone_set() solved this for me.

The HTML for this layout is mostly copied from an Oxygen Easy Posts template. I had to use a custom loop to include the meta query since the Easy Posts element currently doesn't support this.

The end result looks like this. I have this query on multiple pages and just edit the category filter in the query so the client can choose where to display a post with checkboxes on the backend.

Setting up the custom post type in Metabox:

Setting up the custom fields in Metabox:

The author view of creating a new event post in wp-admin:

And the code that handles the display of the loop output:

For the styling, I set the code block to display = flex, direction = row, and wrap to true. The event container was set to a width of 50%. Most of the styling can be copied from an Easy Posts template of your choice.

This is a short example of a custom loop in WordPress. The purpose of this code was to generate a filterable list of QuietCool whole house fan models for an electrician's website. Setting them up as a custom post type also enables a non-developer to easily add or edit models, details, and pricing from wp-admin. I used the Metabox Builder plugin to easily set up the custom fields. The rwmb_meta function you see in the PHP attached is a Metabox helper function to get the custom field values.

The end result with styling dependent on the category.

I'm using Metabox to create the custom post type and metabox fields.

The styling is handled with Oxygen's selector detector.

Probably the most interesting part of this project was styling the loop output blocks depending on what model category they belonged to. This was accomplished with PHP by adding classes to the div depending on the value of a custom field called "category". For example: <div class = " some-class php if statement echo color class here"> This sets the style "some-class" on every iteration of this div and assigns a "color" class also depending on the result of the if statement.

 

Recently we were needing to create a multi-zoned service area for a clients website.  Zone1 would cover from 0-25 mile radius and Zone2 would cover up to 50 mile radius. After a little bit of digging around in the Google Maps API, this was accomplished fairly easily with the maps.circle class. All you need to specify is the center and radius. The API radius is specified in meters. Links to the official docs and examples:

https://developers.google.com/maps/documentation/javascript/shapes#circles

https://developers.google.com/maps/documentation/javascript/examples/circle-simple

The interesting part of this all was using map.fitBounds() to make sure that the map zoom was responsive to different screen sizes. You may want to set padding to zero to override the default 45px that the fitBounds function assigns by default.