Highmaps with Highcharts : Highcharts error #17 with jQuery

I am working on using highcharts with highmaps. I have to show state level drilldown. So, I am using http://www.highcharts.com/maps/demo/latlon-advanced. My code is as follows :

    var baseMapPath = "https://code.highcharts.com/mapdata/";
    localStorage.setItem('locationHash', 'countries/us/us-all'),
    mapGeoJSON = null;
    function change() {
        console.log("localStorage : ", localStorage.getItem('locationHash'));
        var locationVariable = localStorage.getItem('locationHash') + '.js';
        var mapKey = locationVariable.slice(0, -3),
        javascriptPath = baseMapPath + locationVariable,
        up = angular.element(document.getElementById('up')),
        container = angular.element(document.getElementById('container')),
        containerHighcharts = container.highcharts();


        if (containerHighcharts) {
            containerHighcharts.showLoading('<i class="fa fa-spinner fa-spin fa-2x"></i>');
        }
        function mapReady(jsonData) {
            console.log("mapKey inside mapReady function : ", mapKey);
            console.log("Highcharts : ", Highcharts);
            console.log("typeof : ", typeof(Highcharts));
            mapGeoJSON = Highcharts.maps[mapKey];
            var data = jsonData,
                match;

            // console.log("mapGeoJSON inside mapReady: ", mapGeoJSON);
            console.log("data : ", data);
            if (/^countries\/[a-z]{2}\/[a-z]{2}-all$/.test(mapKey)) { // country
                var parent = {
                    desc: 'World',
                    key: 'custom/world'
                };
            }
            up.html('');
            if (parent) {
                up.append(
                    $('<a><i class="fa fa-angle-up"></i> ' + parent.desc + '</a>')
                        .attr({
                            title: parent.key
                        })
                        .click(function () {
                            localStorage.setItem('locationHash', parent.key);
                            change();
                        })
                );
            }
            container.highcharts('Map', {
                title: {
                    text: 'Aosis : Highmaps Lat/Long'
                },
                chartType: 'map',
                tooltip: {
                    pointFormat: '{point.countryName} : {point.count}'
                },
                mapNavigation: {
                    enabled: true,
                    buttonOptions: {
                        verticalAlign: 'bottom'
                    }
                },
                series: [{
                    name: 'Basemap',
                    mapData: mapGeoJSON,
                    borderColor: '#606060',
                    nullColor: 'rgba(200, 200, 200, 0.2)',
                    showInLegend: false
                }, {
                    name: 'Separators',
                    type: 'mapline',
                    data: Highcharts.geojson(mapGeoJSON, 'mapline'),
                    color: '#101010',
                    enableMouseTracking: false,
                    showInLegend: false
                }, {
                    type: 'mapbubble',
                    dataLabels: {
                        enabled: true,
                        format: '{point.countryName}'
                    },
                    name: 'Cities',
                    data: data,
                    maxSize: '3%',
                    color: Highcharts.getOptions().colors[0]
                }],
                plotOptions:{
                    series:{
                        point: {
                            events: {
                                // On click, look for a detailed map
                                click: function () {
                                    console.log("click event");
                                    var key = this.key;
                                    localStorage.setItem('locationHash', 'countries/' + key.substr(0, 2) + '/' + key + '-all');
                                    if(!(/-/.test(key)))
                                        change();
                                    else
                                        console.log("Result inside else : ", /-/.test(key));
                                }
                            }
                        }
                    }
                }
            });
        }

        function getLatLongData(){
            console.log("Inside getLatLongData function");
            $.ajax({
                  url: 'https://www.highcharts.com/samples/data/jsonp.php?filename=us-capitals.json&callback=?',
                  type: 'GET',
                  dataType: 'json',
                  success: function(jsonData){console.log("Completed jsonData call. Now calling mapReady function"); mapReady(jsonData)}
                });
        }
        if (Highcharts.maps[mapKey]) {
            getLatLongData();
        } else {
            $.getScript(javascriptPath, getLatLongData);
        }
    }

    //Trigger the change function on page load
    change();

My highcharts source files are as follows :

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>

I am getting error:

Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17.

A mapbubble series is an extended bubble series, so if you load map as a plugin and you use a mapbubble then you need to include highcharts-more module as well.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>

Getting 17 error -> http://jsfiddle.net/cs0kmz1m/

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>

No error if highcharts-more included -> http://jsfiddle.net/cs0kmz1m/1/