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.

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?

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:

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. 😉