Wp Leaflet Map pro have 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 Leaflet Map Plugin.
1. Create a Custom Field Group
Step 1: First 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 2: To create one, click Custom Fields in the WordPress admin area.
Step 3: Click “Add New” button at the top to create a new field.
Step 4: Then Give a useful Name likes “Google Maps” and Click the “Add Field” button to create the fields.
Step 5: It’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 a post to add a location using ACF. For this:
Step 6: From the WordPress dashboard go to Posts > Add New.
Step 7: Enter the title and post content and assign a category to the post.
Step 8: Now scroll down the post page, you’ll see a google map display on your page. Enter the name of your location. Type a 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 9: Go to Custom Fields-> Edit and copy the field name.
4. Assign ACF location in Map page
Step 10: Go to WP Leaflet Map Pro -> Add or Edit Map page and fill the general information to create map.
Step 11: Scroll down the 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 12: Go 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.