Open User Map Shortcode

Below, you’ll find a detailed guide on how to add the Open User Map Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Open User Map Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Open User Map Plugin and the shortcodes it provides:

Open User Map

"Open User Map is a dynamic WordPress plugin that allows users to create, manage, and display live interactive user maps directly on their website. It's user-friendly and customizable."

★★★★★ (37) Active Installs: 2000+ Tested with: 6.3.2 PHP Version: 7.0

Included Shortcodes:

• [open-user-map]

Open User Map [open-user-map] Shortcode

The Open User Map shortcode is used to render a map on the frontend of your website. The shortcode enqueues necessary CSS and JavaScript files, including the leaflet library for interactive maps and custom frontend scripts. It also localizes scripts for custom JS and AJAX handling. Lastly, it includes the ‘block-map.php’ template to display the map.

Shortcode: [open-user-map]

Examples and Usage

Basic example – Displays an open user map with default settings.

[open-user-map /]

Advanced examples

Displays an open user map with a custom CSS file. The CSS file will be loaded from the plugin’s assets directory.

[open-user-map css='custom.css' /]

Displays an open user map and loads additional JavaScript files. The JavaScript files will be loaded from the plugin’s src/js directory.

[open-user-map js='custom.js,additional.js' /]

Displays an open user map and includes a custom JavaScript snippet. The JavaScript snippet will be retrieved from the plugin’s options.

[open-user-map js_snippet='custom_snippet' /]

Displays an open user map and makes an AJAX request. The AJAX request will be sent to the admin-ajax.php file in the WordPress admin directory.

[open-user-map ajax='true' /]

Displays an open user map and uses a custom template. The template will be loaded from the plugin’s templates directory.

[open-user-map template='custom_template.php' /]

PHP Function Code

In case you have difficulties debugging what causing issues with [open-user-map] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'open-user-map', array( $this, 'render_block_map' ) );

Shortcode PHP function:

function render_block_map( $block_attributes, $content )
    {
        wp_enqueue_style(
            'oum_frontend_css',
            $this->plugin_url . 'assets/frontend.css',
            array(),
            $this->plugin_version
        );
        // load map base scripts
        $this->include_map_scripts();
        wp_enqueue_script(
            'oum_frontend_block_map_js',
            $this->plugin_url . 'src/js/frontend-block-map.js',
            array(
            'oum_leaflet_providers_js',
            'oum_leaflet_markercluster_js',
            'oum_leaflet_subgroups_js',
            'oum_leaflet_geosearch_js',
            'oum_leaflet_locate_js',
            'oum_leaflet_fullscreen_js',
            'oum_leaflet_search_js',
            'oum_leaflet_gesture_js'
        ),
            $this->plugin_version
        );
        // add custom js to frontend-block-map.js
        wp_localize_script( 'oum_frontend_block_map_js', 'custom_js', array(
            'snippet' => get_option( 'oum_custom_js' ),
        ) );
        wp_enqueue_script(
            'oum_frontend_ajax_js',
            $this->plugin_url . 'src/js/frontend-ajax.js',
            array( 'jquery', 'oum_frontend_block_map_js' ),
            $this->plugin_version
        );
        wp_localize_script( 'oum_frontend_ajax_js', 'oum_ajax', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
        ) );
        ob_start();
        require_once "{$this->plugin_path}/templates/block-map.php";
        return ob_get_clean();
    }

Code file location:

open-user-map/open-user-map/inc/Pages/Frontend.php

Conclusion

Now that you’ve learned how to embed the Open User Map Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.