JQVMaps in WordPress

1 Views

I’m using JQVMaps to render a map in a WordPress site. Testing the code outside of WordPress, everything runs perfectly. When I added it to WordPress I got this console error:

[Error] TypeError: ‘undefined’ is not a function (evaluating ‘jQuery(‘#vmap’).vectorMap’)

Read More

Here is the code:

header.php: 

    if (is_page(2)){ ?>
        <link href="jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.world.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/jquery.vmap.un_regions.js" type="text/javascript"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/Chart.js" type="text/javascript"></script>


    <?php }?>

    <?php wp_head(); ?>

footer.php: 

if (is_page(2)){ ?>
        <script type="text/javascript">
            // pie chart options
            var pieOptions = {
                segmentShowStroke : true,
                animateScale : false
            }

            // get pie chart canvas
            var pie= document.getElementById("pie").getContext("2d");

            jQuery(document).ready(function() { //this is where the error is
                jQuery('#vmap').vectorMap({
                    map: 'world_en',
                    backgroundColor: '#fff',
                    borderColor: '#bbb',
                    borderOpacity: 1,
                    borderWidth: .2,
                    color: '#bbb',
                    colors: colored_regions,
                    hoverOpacity: 0.8,
                    selectedColor: '#666666',
                    enableZoom: false,
                    showTooltip: false,
                    onRegionOver : function (element, code, region)
                    {
                        highlightRegionOfCountry(code);
                    },
                    onRegionOut : function (element, code, region)
                    {
                        unhighlightRegionOfCountry(code);
                    },
                    onRegionClick: function(element, code, region)
                    {
                        highlightRegionOfCountry(code);
                        $.ajax('/get_chart_data.php', {
                            data: {region: region},
                            dataType: 'json',
                            success: function(response) {
                                new Chart(pie).Doughnut(response.pieData, pieOptions);
                            }
                        });
                    }   
                });
            });
        </script>

    <?php }?>

And I have #vmap and #pie in the content-page.php file. I’ve already tried several jQuery.noConflict(); solutions, including adding $ into the ready(function($) and adding the noConflict function right after my script tag. Could it still be an issue with how WordPress loads jQuery or is there another problem? You can find the site here. Thanks.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Search your code the wp_head(); and place your code after:

    <?php wp_head(); ?>
<link href="<?php bloginfo('stylesheet_directory'); ?>/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.world.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.un_regions.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/Chart.js"></script>

  2. It’s better to add this as a plugin, so when changing themes, the needed changes are minimal or even zero.

    And the correct way is to enqueue the styles/scripts, so as to avoid conflicts with other plugins. Also, jQuery should not be loaded from external sources, always use the bundled version that ships with WordPress, this avoids conflicts as well (a whole lot of them).

    This is a simplified version of your code. I’ve removed files not available, and vars/functions referenced but not included in your sample code. 

    <?php
/**
 * Plugin Name: (SO) JQVMap
 * Plugin URI:  https://stackoverflow.com/a/25780694/1287812
 * Author:      brasofilo
 */
add_action( 'wp_enqueue_scripts', 'so_25725356_enqueue' );

function so_25725356_enqueue()
{
    # Run only on given page
    if( !is_page(2) )
        return;

    # Enqueue styles
    wp_enqueue_style( 'jmap-css', plugins_url( '/css/jqvmap.css', __FILE__ ) );

    # Register dependencies files
    wp_register_script( 'jmap-js', plugins_url( '/js/jquery.vmap.js', __FILE__ ) );
    wp_register_script( 'world-js', plugins_url( '/js/maps/jquery.vmap.world.js', __FILE__ ) );

    # Enqueue custom JS file along with dependencies
    wp_enqueue_script( 
        'start-js', 
        plugins_url( '/js/start.js', __FILE__ ), 
        array( 'jquery', 'jmap-js', 'world-js' ), // dependencies
        false, // version
        true   // will load start-js on footer, the rest goes on header
    );
}

    And the file start.js:

    jQuery(document).ready(function($) {
    $('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: '#fff',
        borderColor: '#bbb',
        borderOpacity: 1,
        borderWidth: .2,
        color: '#bbb',
        //colors: colored_regions,
        hoverOpacity: 0.8,
        selectedColor: '#666666',
        enableZoom: false,
        showTooltip: true,
        onRegionOver : function (element, code, region){},
        onRegionOut : function (element, code, region) {},
        onRegionClick: function(element, code, region)
        {
            console.log(region);
        }   
    }); 
});

    And the page with ID #2 contains:

    <div id="vmap" style="width: 600px; height: 400px;"></div>

    Related:

  3. I think the problem lies in the path of your javascripts

        <link href="<?php bloginfo('stylesheet_directory'); ?>/jqvmap.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.world.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/jquery.vmap.un_regions.js" type="text/javascript"></script>
    <script src="<?php bloginfo('stylesheet_directory'); ?>/Chart.js"></script>

    Remember to upload those files to your current theme ..

        wp-content/theme/TU_THEME