Shortcodes are powerful tools in WP Maps Pro that allow users to display maps and locations on their WordPress websites with ease. In this tutorial, we will explore two main shortcodes: “put_wpgm” and “display_map.” The “put_wpgm” shortcode is automatically generated when a user creates a map, while the “display_map” shortcode provides a quick and straightforward way to show a basic map without extensive customization. Let’s dive into the details of these shortcodes and their various options for more flexibility.
The [put_wpgm] Shortcode:
The “put_wpgm” shortcode is associated with each map created in WP Maps Pro. It serves as a unique identifier for the map and provides various options for customization. Here are the key parameters you can use with this shortcode:
- maps_only=true:
- This parameter displays the map without any listing or filters.
- Ideal for users who want to showcase the map only without additional clutter.
- category=”category 1, category 2″:
- Use this parameter to filter and show locations from specific categories only.
- Enter the names of the desired categories separated by commas.
- show_all_locations=true:
- By default, the “put_wpgm” shortcode displays locations assigned to the map only.
- However, using this parameter will show all locations added in the “Manage Locations” section, regardless of map assignments.
- limit=10:
- The “limit” parameter restricts the number of locations displayed on the map.
- current_post_only=true
- To show the current post’s location on the map only. All other posts will be hidden.
The [display_map] shortcode:
To start, let’s demonstrate how to display a single location on the map using latitude and longitude. In this example, we’ll use the [display_map] shortcode to showcase a specific point with a custom info window message:
[display_map width="500" height="500" zoom="5" language="en" map_type="ROADMAP" map_draggable="true" marker1="39.639538 | -101.527405 | title | infowindow message | marker category name"]
- width=”500″: This parameter sets the width of the map to 500 pixels, controlling how wide the map will be displayed on your webpage.
- height=”500″: This parameter sets the height of the map to 500 pixels, determining how tall the map will appear on your webpage.
- zoom=”5″: This parameter sets the initial zoom level of the map. In this case, the map will start with a zoom level of 5, displaying a wider view of the map.
- language=”en”: This parameter sets the language of the map. In this example, the map will be displayed in English (“en”).
- map_type=”ROADMAP”: This parameter sets the map type to “ROADMAP,” indicating that the map will show streets and roads without additional features like satellite view or terrain.
- map_draggable=”true”: This parameter enables map dragging, allowing users to click and drag the map to navigate around.
- marker1=”39.639538 | -101.527405 | title | infowindow message | marker category name”: This parameter adds a marker to the map with the following details:
- Latitude: 39.639538
- Longitude: -101.527405
- Title: The marker will be labeled with the title “title” on the map.
- Infowindow Message: When users click on the marker, a window will pop up with the message “infowindow message,” providing additional information about the location.
- Marker Category Name: This assigns the marker to the category named “marker category name,” allowing users to filter markers based on categories.
Multiple Locations:
In this example, the [display_map] shortcode is used to generate a map that displays two markers at once. Each marker is represented by a pair of latitude and longitude coordinates.
[display_map marker1="39.639538 | -101.527405" marker2="39.027719|-111.546936"]
Display Map using Address
The [display_map] shortcode in this example allows you to show markers using addresses instead of specifying latitude and longitude.
[display_map width="500" height="500" zoom="5" language="en" map_type="ROADMAP" map_draggable="true" scroll_wheel="true" address1="New Delhi, India | title | infowindow message | marker category name"]
address1=”New Delhi, India | title | infowindow message | marker category name”: This part of the shortcode adds a marker to the map using the address “New Delhi, India” with the following details:
- Title: The marker will be labeled with the title “title” on the map.
- Infowindow Message: When users click on the marker, an infowindow will pop up with the message “infowindow message,” providing additional information about the location.
- Marker Category Name: This assigns the marker to the category named “marker category name,” allowing users to filter markers based on categories.
Multiple Locations:
In this example, the [display_map] shortcode is used to generate a map with two markers at different locations, each specified using an address.
[display_map address1="New Delhi, India" address2="Mumbai, India" address3="Bangalore, India"]
Conclusion
With the “put_wpgm” and “display_map” shortcodes, WP Maps Pro provides users with powerful tools to showcase maps and locations effortlessly. Whether you need advanced customization or prefer a simple and elegant map display, these shortcodes cater to your needs. Additionally, the extensive list of parameters allows you to fine-tune your map presentation for a seamless user experience. Experiment with these shortcodes and take your map displays to the next level!