How to Display a Map on the Frontend

With the WP Maps Pro plugin, displaying your map on any post, page, or custom post type is quick and easy using a simple shortcode. When you create a map, a unique shortcode is automatically generated — all you have to do is paste it where you want the map to appear.

🗺️ Steps to Display Google Map on Frontend

Step 1: Go to the Manage Maps page in your WordPress admin. You’ll see a list of all your created maps.

Step 2: Find the map you want to embed and copy its shortcode.

Step 3: Paste the copied shortcode into any post, page, or custom post type using the content editor.

Step 4: Click Publish or Update the page. Now open your page on the frontend — your map will be visible!

💡 Pro Tips

• You can use the shortcode inside Gutenberg blocks, classic editor, or any page builder like Elementor or WPBakery.
• Each map has a unique shortcode format like [put_wpgm id="123"].
• Want to use maps in widgets or footers? Use shortcode-compatible widget areas.

Need help displaying your map? Submit a support ticket and we’ll assist you right away.

Related Tutorials:

• How to display street view in Google Maps
• How to load the Google Maps based on the visitor’s current location
• How to assign permission to users in Google Maps
• How to Display a Map on the Frontend
• How to import your backup