How to integrate ACF and Google Maps API

By Clifton @ WPCliffsNotes

Play Video

In this video I will walk you through how to integrate google maps in a WordPress website and customize it with Advanced Custom Fields. This tutorial is great if you are wanting to customize the look and feel of your google map. It walks you through how to add custom colors, a zoom in/out, etc.

Table of Contents

Setting up Custom Fields
0:47 ➜ Explain what we are creating
1:15 ➜ Google Map API snippet from ACF Website or Awesome ACF
1:50 ➜ Get a Google API Key
2:25 ➜ ACF Documentation
3:00 ➜ Creating Field Group and Custom Fields
4:34 ➜ Create WP page template  – Documentation
12:30 ➜ – Google Map

Starting to Code Map and Custom Fields
13:44 ➜ Map Array
16:00 ➜ Copy HTML from Codyhouse Project files
18:20 ➜ Copy CSS from Codyhouse Project files
16:00 ➜ Copy HTML from Codyhouse Project files
20:13 ➜ Copy Javascript from Codyhouse Project files
22:20 ➜ Add ACF Fields to Javascript

Sign-up for my Weekly Newsletter ➜

(This is an Affiliate Link /It will help you and me)
Check out SiteGround ➜

Support Us on Patreon ➜

Email: [email protected]


Share on facebook
Share on google
Share on twitter
Share on linkedin


40+ videos


50+ Websites

Clifton Canady

WordPress Developer

Clifton has over 10 years of experience working with WordPress. He love teaching others about WordPress. And really has a passion for WordPress and looks forward to seeing it grow.

Clifton's Courses:
Scroll to Top

be the first to know about Everything WPCliffsnotes

don't miss out! subscribe now

WPCliffsNotes Icon