JQVMaps in WordPress

Question

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')

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.

Answer 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>