Two maps work individually but not when on the same page

Thanks!

What is happening is you are probably putting both of the maps in the same container. To work around that make a small modification in the map code.

Find these two lines:

AmCharts.makeChart("map",{

and

<div id="map" style="width: 100%; height: 1075px;"></div>

And replace “map” in it with “%CHART%”:

AmCharts.makeChart("%CHART%",{

and

<div id="%CHART%" style="width: 100%; height: 1075px;"></div>

Let me know if that helped.

Wow, great support as well. ??

I tried, but this messes up the rest of the formatting (I have visited countries in a separate colour, resized it and have remove zoomcontrol etc.) After I change “map” to “%CHART” it puts zoomcontrol back in the image and makes all countries yellow (which is a colour I have not used at all)?

I put my attempts so far on these pages, any advice is very welcome:
https://www.sannesteemers.nl/mapstest1/
https://www.sannesteemers.nl/mapstest2/
https://www.sannesteemers.nl/mapstestboth/ > now only showing map 2 in the place where map 1 should be, and not showing map 1 at all.

It looks like you’re including the whole HTML, including headers into the HTML box. This might be confusing the browsers.

Try the following:

1) Add links to ammap.js and relevant map file (i.e. worldLow.js or nigeriaLow.js) into “Resources” box.

2) Add the following into “HTML” box:

<div id="%CHART%" style="width: 100%; height: 1075px;"></div>

3) Move the actual code, into “JavaScript” box.

A map code is everything starting with:

AmCharts.makeChart("%CHART%",{

and ending with

});

Do this for both of the maps.

Does that make sense?

THANK YOU!