• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Hide some Google Maps points of interest in Advanced Custom Fields

Discover in this tutorial how to hide certain markers on a Google map displayed using Advanced Custom Fields (ACF).

If you are creating some kind of establishment directory or similar, one of the most interesting fields in Advanced Custom Fields is the Google Maps field, as it allows you to enter the address of the establishment from the backend to display it in the frontend following the plugin documentation.

Google-Maps-created-ACF-by-default
Google Map created with ACF by default

By default, the map loads all the points of interest surrounding your marker.

In general, there is usually no problem, but what if you don’t want competing establishments to appear on the map?

That is, if you are making a selection of establishments on your website, maybe you are not interested that next to the one you recommend appears the rest, right?

Google-Maps-created-ACF-eliminating-points-of-interest
Google Map created with ACF removing some points of interest.

That’s where the Google Maps API comes into play.

In this tutorial we are going to see how to get only the points of interest you want to be shown on the map.

Code to hide Google Maps points of interest on a map created with Advanced Custom Fields

In this case, before applying the tutorial:

  • You have to get a Google API key.
  • You must create a map following the steps in the ACF documentation.

If you want me to prepare a tutorial explaining you how to carry out those previous steps, just ask me though the contact form. You know, subscriber advantages. 😉

Once you have the map showing all the markers, replace this Google Maps helper code snippet:

To see this and another 847 code snippets of this website, login or subscribe here.

With this code you are adding some custom styles to the map where you indicate that the points of interest related to tourism and business are not shown.

But you can modify it for the ones you are interested in.

I leave you below all the points of interest that you can hide and which code you should use:

  • poi > select all points of interest.
    • poi.attraction > select tourist attractions.
    • poi.business > select business.
    • poi.government > select government buildings.
    • poi.medical > selects emergency services, including hospitals, pharmacies, police and others.
    • poi.park > select parks.
    • poi.place_of_worship > selects places of religious worship, including churches, temples, mosques, and other.
    • poi.school > select schools.
    • poi.sports_complex > select sports facilities.

That is, if you want to hide all the points of interest you would have to use: {"featureType":"poi.attraction","stylers":[{"visibility":"off"}]}

And this is just a very concrete example of the styles you can change. In addition to the points of interest, you can modify other markers or the color palette. If you are interested take a look at Google’s documentation.

Conclusions

Now you know how to hide points of interest on a Google map when using Advanced Custom Fields.

Besides, this is just an example of all the customizations you can do thanks to the Google Maps API and its integration with Advanced Custom Fields.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉

Advanced Custom Fields Javascript

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?