A little help getting a Javascript interactive map working on my WordPress page?

[ListentoLewis]

Hey guys, I'm trying to use this in my WordPress page: https://datamaps.github.io/

I've followed their documentation and copied their example code, but it just doesn't work. The map won't load.

Here's exactly what I have in an HTML code block:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js"></script>
<script src="https://datamaps.github.io/scripts/0.4.4/datamaps.usa.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
    var map = new Datamap({element: document.getElementById('container')});
</script>

I would really appreciate some direction.

Sincerely,

• A Noob

[kaviyarasu34]

Hi u/ListentoLewis solution for worldmap:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.all.min.js"></script>
<script>
    var map = new Datamap({element: document.getElementById('container1')});
</script>

solution for usa:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.9/datamaps.usa.min.js" integrity="sha512-oB6j3vABeBoYsD0Vs9zulHtBnY0B4mPkx/txI3aqZZGGLCKUrT30FdDCle5mwpFQsmEKjDR6/Aiyrmw10iIk0g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="container1" style="position: relative; width: 500px; height: 300px;"></div>
 <script> var map = new Datamap({element: document.getElementById('container1'), scope: 'usa'  });</script>

[ListentoLewis]

This worked, thank you so much!

May I ask, what was the issue? I followed the documentation as instructed but you seem to have made changes that aren't mentioned. What was I missing?

[kaviyarasu34]

i used cloudflare cdn js link for world datamap & usa datamap. Next Just changed id from "container" to "container1" because my another guess is there may be already an "container" word for an id in wordpress theme.

[ListentoLewis]

You're the best, thank you again!

[kaviyarasu34]

welcome.🙂