Wp Google Map pro have a new functionality to assign location using Advanced Custom Fields. In this tutorial we will look at how the Advanced Custom Fields plugin can be used to create a location in Google Map Plugin.

1. Create a Custom Field Group

Step 1First install the free wordpress plugin ACF plugin and activate it.

In any case, a new Custom Fields menu should now show up in your WordPress admin area.


Step 2To create one, click Custom Fields in the WordPress admin area.
Step 3Click “Add New” button at the top to create a new field.


Step 4Then Give a useful Name likes “Google Maps” and Click the “Add Field” button to create the fields.

Step 5It’ll open a form and enter the Field Label , Field Name(automatically be populated with the label) and select Field Type– Google Map.


Click Publish button to save the fields.

2 .Create location Using Posts(ACF location)

After that you need to create post for add location using ACF. For this:
Step 6 From the WordPress dashboard go to Posts > Add New.
Step 7Enter the title and post content and assign category to the post.
Step 8Now scroll down post page, you’ll see a google map display in your page. Enter the Name of your location.Type few words and choose your Address.


Click Publish button to publish your post.
Note:If you didn’t get acf field google map or find any error, Open up your functions.php file located in wp-content/themes/your-theme-name/ and add this code in it:
function my_acf_google_map_api( $api ){
$api['key'] = 'Insert your api key here';
return $api;
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

3. Copy Field Name

Step 9Go to Custom Fields-> Edit and copy the field name.


4. Assign ACF location in Map page.

Step 10Go to WP Google Map Pro -> Add or Edit Map page and fill the general information to create map.
Step 11Scroll down page and point to the ‘Show Posts using ACF’ section and paste the acf field name(in my case it would be google_maps).

and click to Save Map.

5. Display map in frontend

Step 12Go to Manage Map page and copy the shortcode of your map and paste it into any post/page to display google map.
We have created tutorial related to this please follow it. HOW TO DISPLAY MAP IN FRONTEND?

Now you’ll see a location created using ACF in frontend.

Video Tutorial