WordPress – Manage WP Google Maps on the Frontend

In this tutorial, we’ll show you how to easily display and manage maps from the WP Google Maps plugin on the frontend.

This can be really useful if you want to create a front-end dashboard for WordPress Multisite or WP Ultimo from which users will manage their sites instead of using the normal WordPress dashboard.

We’ll use the free version of WP Google Maps and the pro version of the WP Frontend Admin plugin. It allows you to display any wp-admin page on the frontend with one click or using a shortcode.

You can build frontend dashboards using your own appearance from any WordPress theme or from any WordPress age builder. You can also create web apps based on WordPress plugins and make money.

After installing and activating the WP Frontend Admin plugin, follow these simple steps to display and manage WP Google Maps on the frontend.

1- Display the WP Google Maps page on the frontend

Normally, if you want to display any wp-admin page on the frontend, you need to be an experienced developer. However, WP Frontend Admin simplifies the creation of frontend pages by allowing you to display any wp-admin page with one click.

In this case, you just need to go to Maps in wp-admin and hit View on the frontend.

When you click on View on the frontend, you’ll see the My Maps page on the frontend, using the appearance settings of your currently active theme.

Optionally, you can use any of the following WordPress page builders to create beautiful frontend pages:

• Elementor
• Visual Composer
• Gutenberg
• Divi
• Beaver Builder
• WP Page Builder
• Page Builder by SiteOrigin
• Oxygen
• Live Composer
• Brizy
• Etc.

In case you use any of the mentioned page builders, you can use the following shortcode to display the My Maps page on the frontend:

[vg_display_admin_page page_url="admin.php?page=wp-google-maps-menu"]

Now you need to click Preview to see the WP Google Maps page on the front-end.

Important – WP Frontend Admin only shows admin content on the frontend in live mode. Therefore, even if you use a page builder, you need to Preview the page.

2- Select the frontend WP Google Maps page’s basic information

Once you hit View on the frontend or Preview, depending on how you’re displaying the My Maps page from the WP Google Maps plugin on the frontend, you’ll see the maps listed on the frontend.

WP Frontend Admin will show you the options you need to set up your new frontend page on the left side of the screen. You can use this Quick Settings panel to start configuring your page by selecting the following info:

• Page title
• URL slug
• Page template: If you use the Default template, you’ll use your theme’s appearance.
• Add to this menu: You can create a nav menu for your frontend dashboard and add the pages to it.

3- Hide any unnecessary fields from your frontend maps page

WP Frontend Admin allows you to easily hide any unnecessary fields and elements from your frontend admin pages.

This is great because you can customize the options your users will have to manage the Google Maps on the frontend. It’s also really useful because, if you use the free version of WP Google Maps, you can hide any buttons or links asking users to upgrade the plugin to the Pro version.

To hide any elements from the frontend maps list, you need to:

1. Hit Hide element on the Quick Settings panel.
2. Click the element you want to hide.
3. Repeat the previous 2 steps with every element you want to hide.

You can also tick the Hide notices added by other plugins or themes checkbox to prevent users from seeing wp-admin notices on the frontend.

4- Edit any texts on your frontend Google Maps page

Besides hiding any unnecessary elements, you can customize your frontend maps page by editing the texts on it to make them clearer for the users or to remove any references to plugin names, etc.

To edit the texts on your frontend Google Maps page:

1. Hit Edit texts.
2. Edit all the texts you want to change.
3. Hit Stop editing texts.

5- Disable any unnecessary plugins on this frontend page

We’ve included an experimental option that allows you to disable WordPress plugins from specific frontend pages to increase performance. You can tick the plugins that won’t be used by this page on the Quick Settings panel.

Besides, you can tick the The users should see the posts added by them only checkbox so that users view the maps added by them and don’t get access to others’ maps.

Once you’re done configuring your frontend Google Maps page, you can hit Save to apply the changes and publish the page.

6- Optional – Set up the edit map form on the frontend

At this point, we’ve set up the frontend maps list, but there are some fields and texts you may want to hide or edit on the edit map form on the frontend.

You can hit Edit on any of your Google Maps to configure the form. For example, you can hide any Pro Upgrade buttons, any unnecessary links that appear on the pages, and you can even hide any tabs from the edit map form.

To set up the edit map form on the frontend, you just need to follow the steps we already explained above: hide any unnecessary elements and edit any texts you want.

Once you’re done setting up everything, this is how your frontend Google maps page could look like:

Of course, you need to keep in mind that the page will have the appearance you select, according to your WordPress theme / page builder and creativity.

7- Important final notes

• Keep in mind that only users with the manage_options capability will be able to manage the google maps on the frontend.
• Here are some notes on how to integrate WP Frontend Admin with WordPress Multisite.
• Here are some notes on how to integrate WP Frontend Admin with WP Ultimo.

Displaying and managing maps from the WP Google Maps plugin on the frontend is easy with the WP Frontend Admin plugin. The best part is that you can use the plugin to display any other wp-admin page on the frontend to create frontend dashboards. Besides, you can create web apps based on WordPress plugins and sell your platforms to make money without necessarily being an experienced developer.