Title: Need help: "Uncaught TypeError: undefined is not a function"
Last modified: August 22, 2016
---
# Need help: "Uncaught TypeError: undefined is not a function"
* [jmgriffin](https://wordpress.org/support/users/jmgriffin/)
* (@jmgriffin)
* [11 years, 4 months ago](https://wordpress.org/support/topic/need-help-uncaught-typeerror-undefined-is-not-a-function/)
* I need a bit of help, I keep getting the following error when displaying a map
using the plugin:
* “Uncaught TypeError: undefined is not a function”
* This causes the map to display properly on a wordpress page but the navigation
is all screwy. When I click on a country the map keeps re-centering on the click
country and doesn’t all for proper navigation.
* The page display perfectly in JSfiddle: [http://jsfiddle.net/jmgriffin/fbtmzybo/4/](http://jsfiddle.net/jmgriffin/fbtmzybo/4/)
But doesn’t work well on the test page: [http://weekendblitz.com/flyingblue-ammap-troubleshoot/](http://weekendblitz.com/flyingblue-ammap-troubleshoot/)
* Any help would be greatly appreciated!
* Thanks,
Jeffrey
* [https://wordpress.org/plugins/amcharts-charts-and-maps/](https://wordpress.org/plugins/amcharts-charts-and-maps/)
Viewing 5 replies - 1 through 5 (of 5 total)
* Plugin Author [martynasma](https://wordpress.org/support/users/martynasma/)
* (@martynasma)
* [11 years, 4 months ago](https://wordpress.org/support/topic/need-help-uncaught-typeerror-undefined-is-not-a-function/#post-5617461)
* First of all, your map looks awesome!
* Back to the issue. It seems you are creating two instances of the map. First
one is created in container “amchart1” which does not exist.
* The second one is created in “amchart2” which exists. You are actually seeing
the second map.
* However, all the related functions and events are defined twice as well. Map
instances are also assigned to the same “map” variable which might be confusing
JavaScript, hence the errors.
* If the first instance of the map is not needed, I strongly suggest you remove
that from your code.
* Thread Starter [jmgriffin](https://wordpress.org/support/users/jmgriffin/)
* (@jmgriffin)
* [11 years, 4 months ago](https://wordpress.org/support/topic/need-help-uncaught-typeerror-undefined-is-not-a-function/#post-5617657)
* 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 [http://jsfiddle.net/fbtmzybo/5/](http://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:
* ``
`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
* Plugin Author [martynasma](https://wordpress.org/support/users/martynasma/)
* (@martynasma)
* [11 years, 4 months ago](https://wordpress.org/support/topic/need-help-uncaught-typeerror-undefined-is-not-a-function/#post-5617659)
* Well,
* It appears you still have two chart instances (and related code) on the same
page. Do you perhaps include a shortcode twice? If you don’t need both instances
on the page you should get rid of one of them.
* But the real issue is that you are assigning a map instance to variable “amchart1”
but later are still referencing variable “map” to add listeners, hence legend
interactions not working:
* `map.addListener('init', function() {`
* My advise: instead of harcoding variable names like “map” or “amchart1” simply
use “%CHART%” in the code:
* ```
var %CHART% = AmCharts.makeChart("%CHART%", {
type: "map",
....
});
%CHART%.addListener("clickMapObject", function(event) {
document.getElementById("info").innerHTML = '' + event.mapObject.title + '
' + event.mapObject.info + '
';
});
%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;
var map = event.chart;
if (undefined !== event.dataItem.hidden && event.dataItem.hidden) {
event.dataItem.hidden = false;
map.showGroup(groupId);
} else {
event.dataItem.hidden = true;
map.hideGroup(groupId);
}
map.legend.validateNow();
}
```
* As well as in HTML box:
* ``
* Thread Starter [jmgriffin](https://wordpress.org/support/users/jmgriffin/)
* (@jmgriffin)
* [11 years, 4 months ago](https://wordpress.org/support/topic/need-help-uncaught-typeerror-undefined-is-not-a-function/#post-5617663)
* 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: [http://weekendblitz.com/flyingblue-ammap-troubleshoot/](http://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”:
* ```
http://www.amcharts.com/lib/3/ammap.js
http://www.amcharts.com/lib/3/maps/js/worldLow.js
```
* This is all I have in the HTML pane:
* ```
```
* 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: "http://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: "Number of Air France/KLM Flying Blue miles required for a roundtrip award
Economy: 100k miles
Premium Economy: n/a miles
Business: 250k miles",
info: "Number of Air France/KLM Flying Blue miles required for a roundtrip award
Economy: 100k miles
Premium Economy: n/a miles
Business: 250k miles"
}, {
........
{
title: "Falkland Islands (Malvinas)",
id: "FK",
color: "#DDDDDD",
groupId: "n/a",
description: "Number of Air France/KLM Flying Blue miles required for a roundtrip award
Economy: n/a miles
Premium Economy: n/a miles
Business: n/a miles",
info: "Number of Air France/KLM Flying Blue miles required for a roundtrip award
Economy: n/a miles
Premium Economy: n/a miles
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 = '' + event.mapObject.title + '
' + event.mapObject.info + '
';
});
%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 [http://weekendblitz.com/flyingblue-ammap-troubleshoot/](http://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
* Plugin Author [martynasma](https://wordpress.org/support/users/martynasma/)
* (@martynasma)
* [11 years, 1 month ago](https://wordpress.org/support/topic/need-help-uncaught-typeerror-undefined-is-not-a-function/#post-5617759)
* Hey Jeffrey,
* I’m sorry I seem to have missed your last message. The map looks fine on your
link.
* Were you able to resolve all the issues?
Viewing 5 replies - 1 through 5 (of 5 total)
The topic ‘Need help: "Uncaught TypeError: undefined is not a function"’ is closed
to new replies.
* 
* [amCharts: Charts and Maps](https://wordpress.org/plugins/amcharts-charts-and-maps/)
* [Frequently Asked Questions](https://wordpress.org/plugins/amcharts-charts-and-maps/#faq)
* [Support Threads](https://wordpress.org/support/plugin/amcharts-charts-and-maps/)
* [Active Topics](https://wordpress.org/support/plugin/amcharts-charts-and-maps/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/amcharts-charts-and-maps/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/amcharts-charts-and-maps/reviews/)
* 5 replies
* 2 participants
* Last reply from: [martynasma](https://wordpress.org/support/users/martynasma/)
* Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/need-help-uncaught-typeerror-undefined-is-not-a-function/#post-5617759)
* Status: not resolved