jmgriffin

Agree, this plugin broke my blog after a recent WordPress update. It took a good bit of time with process of elimination to discover the culprit but this was it.

Thanks! I sort of figured something was interfering with the other references and the %CHART% variables of the code.

Per your suggestion, I have changed all references to “map” in my code to %CHART% , you can view the sample code here: https://weekendblitz.com/flyingblue-ammap-troubleshoot/

Your above suggestion has fixed a great number of the issues but I am still experiencing the problem of having 2 instances of the map on the page.

I only have one instance of the short code on the sample page and the sample appears perfectly when using the “Preview chart or map” option with in the Charts and Maps plugin page.

If it helps to troubleshoot, here is what I have in the “Resources pane”:

https://www.amcharts.com/lib/3/ammap.js
https://www.amcharts.com/lib/3/maps/js/worldLow.js

This is all I have in the HTML pane:

<div id="body" style="font-family: Verdana; font-size: 12px;padding: 10px;"></div>
<div id="%CHART%" style="width: 100%px; height: 400px;"></div>
<div id="info" style="padding: 10px; margin: 5px; background-color: #dedede;font-family: Verdana; font-size: 12px;padding: 10px;"></div>
<div id="description" style="font-family: Verdana; font-size: 12px;padding: 10px;"></div>

Here’s a shortened version of what’s in the JavaScript pane:

var %CHART% = AmCharts.makeChart("%CHART%", {
    type: "map",
    showDescriptionOnHover: "true",
    mouseWheelZoomEnabled: "true",
    "theme": "none",
    pathToImages: "https://www.amcharts.com/lib/3/images/",

    dataProvider: {
        map: "worldLow",
        zoomLatitude: 46.214708,
        zoomLevel: 1,
        zoomLongitude: 10.347274,
        areas: [{
        title: "American Samoa",
        id: "AS",
        color: "#3DD847",
        groupId: "100kmiles",
      description: "<b>Number of Air France/KLM Flying Blue miles required for a roundtrip award</b><br>Economy: 100k miles<br>Premium Economy: n/a miles<br>Business: 250k miles",
      info: "<b>Number of Air France/KLM Flying Blue miles required for a roundtrip award</b><br>Economy: 100k miles<br>Premium Economy: n/a miles<br>Business: 250k miles"
    }, {
........
{
        title: "Falkland Islands (Malvinas)",
        id: "FK",
        color: "#DDDDDD",
        groupId: "n/a",
      description: "<b>Number of Air France/KLM Flying Blue miles required for a roundtrip award</b><br>Economy: n/a miles<br>Premium Economy: n/a miles<br>Business: n/a miles",
      info: "<b>Number of Air France/KLM Flying Blue miles required for a roundtrip award</b><br>Economy: n/a miles<br>Premium Economy: n/a miles<br>Business: n/a miles"

        }]
    },

    areasSettings: {
        autoZoom: true,
        descriptionWindowBottom: "10",
        selectable: true,
        rollOverOutlineColor: "#FFFFFF",
        selectedColor: "#848383",
        rollOverColor: "#CC0000",
        alpha: 0.8,
        unlistedAreasAlpha: 0.6
    },

    zoomControl: {
        zoomControlEnabled: true,
        maxZoomLevel: 8
    },

    legend: {
        width: 260,
        marginRight: 27,
        marginLeft: 27,
        equalWidths: true,
        maxColumns: 2,
        backgroundAlpha: 0.5,
        backgroundColor: "#FFFFFF",
        borderColor: "#FFFFFF",
        borderAlpha: 1,
        right: 0,
        horizontalGap: 10,
        switchable: true,
        data: [{
            title: "25k miles",
            color: "#618ADA",
            groupId: "25kmiles"
        }, {
            title: "30k miles",
            color: "#FFCC33",
            groupId: "30kmiles"
        }, {
            title: "35k miles",
            color: "#66CC99",
            groupId: "35kmiles"
        }, {
            title: "50k miles",
            color: "#D54490",
            groupId: "50kmiles"
        }, {
            title: "60k miles",
            color: "#A041D5",
            groupId: "60kmiles"
        }, {
            title: "80k miles",
            color: "#FF9349",
            groupId: "80kmiles"
        }, {
            title: "100k miles",
            color: "#3DD847",
            groupId: "100kmiles"
        }]
    }

});

%CHART%.addListener("clickMapObject", function(event) {
    document.getElementById("info").innerHTML = '<p><b>' + event.mapObject.title + '</b></p><p>' + event.mapObject.info + '</p>';
});

%CHART%.hiddenLegendItems = {};
%CHART%.addListener('init', function() {
    %CHART%.legend.switchable = true;
    %CHART%.legend.addListener('clickMarker', AmCharts.myHandleLegendClick);
    %CHART%.legend.addListener('clickLabel', AmCharts.myHandleLegendClick);

    function toggleMapObjectAlpha(e) {
        var alpha = e.type == "rollOverMapObject" ? 0.9 : 0.9;
        e.event.target.setAttribute("fill-opacity", alpha);
    }
    %CHART%.addListener('rollOverMapObject', toggleMapObjectAlpha);
    %CHART%.addListener('rollOutMapObject', toggleMapObjectAlpha);
});

AmCharts.myHandleLegendClick = function(event) {
    var groupId = event.dataItem.groupId;
    if (undefined !== event.dataItem.hidden && event.dataItem.hidden) {
        event.dataItem.hidden = false;
        %CHART%.showGroup(groupId);
    } else {
        event.dataItem.hidden = true;
        %CHART%.hideGroup(groupId);
    }
    %CHART%.legend.validateNow();
};

When you view the sample page https://weekendblitz.com/flyingblue-ammap-troubleshoot/ you’ll find that the description box at the bottom is now working fine as is the legend toggle but the map panning feature is still working improperly and it all seems to be a result of the multiple instances of the map being called on the page.

It seems like the HTML portion of %CHART% is assigned an ID of “amchart2” but then the first instance of the map is assigned an ID of amchart1 then when all of amchart1 code finishes, it immediately restarts the code with an ID of amchart2. I can’t quite figure out why it’s duplicating the code. Again, this doesn’t happen in the preview section and doesn’t happen in JS Fiddle, just on the live page when I use the Amchart Plugin shortcode.

Thanks again!

Jeffrey

martynasma,

Thank you for the kind words on the map and for the suggestions!

I’ve opened the Javascript Console (should have done this ages ago) and found the multiple container issue I’m just having a bit of trouble isolating the problem.

For example, as you can see from the JS Fiddle here https://jsfiddle.net/fbtmzybo/5/ (which indeed works perfectly!), I have a few possible items that are interfering with the typical variables of the plug in. I think it boils down to the %CHART% replacement. This includes the legend that allows users to deselect groups and have them disappear from the maps as wells as the gray description box at the bottom which populates when clicking on a country.

I discovered that my problem with the multiple containers which you pointed out above (thanks again!) were fixed when I changed %CHART%” to “amchart1” in the following lines:

<div id="amchart1" style="width: 100%px; height: 400px;"></div>
var amchart1 = AmCharts.makeChart("amchart1", {

This change preserves some of the map functionality (it removes the multiple container issues) but disables the ability to deselected the groups using by toggling the legend and the feature of having details appear in the gray box below when clicking on a country.

Do you have any further suggestions on what to try?

Thanks,
Jeffrey

I am having the same issue. I would like to search on ALL licenses except for “All Rights Reserved” but I can only select 1 license at a time.

Thanks, just to summarize what is the preferred, best solution work-around currently? Is it this method?:

“I have improved on Austin Ginder workaround. Instead of commenting the row he gives, remove the “media” item from the array. So that the row becomes like this:

wp_enqueue_script('comprehensive-google-map-plugin', CGMP_PLUGIN_JS. '/cgmp.admin'.$minified.'.js', array('jquery', 'wp-ajax-response'), CGMP_VERSION, true);

This will fix all the problems and will keep maps ediatable.”

Also, will this keep the new visual editor from breaking? Specifically, will you to maintain the new 4.0 scrolling feature that keeps the menu bar visible when editing?

Help! I am having the same issue. Comprehensive Google Map Plugin breaks the slick new looking Visual Editor delivered in WordPress 4.0.

Thanks,
Jeffrey