In your theme’s functions.php, add code to hook “wp_enqueue_scripts” action. In the callback, enqueue your CSS and jQuery.
https://developer.www.ads-software.com/reference/functions/wp_enqueue_script/
https://developer.www.ads-software.com/reference/functions/wp_enqueue_style/

When you enqueue the jQuery file, in the wp_enqueue_script() call, be sure to specify ['jquery'] as the dependency parameter. You also need to wrap your jQuery in a “noConflict wrapper”. See this user note for specifics.

If you made the HTML into a template file instead of placing in page content, be sure it’s including a head and footer section. Look at your theme’s page.php template for an example.

That could be – so I’ve been dropping the HTML in a page, and dropping the CSS to apply to just that page as well. It’s the JS where I’m getting lost, how exactly can I drop it in the functions file?

Do I create a separate .js file with just the content in the JS section? Then edit the functions.php file (at the bottom) to add the wp_enqueue_scripts codes?

So for example, I have the main.js (which is where the JS is located for the map) under my js subfolder in my theme files. In my functions.php file, what do I put (and where? After the last “?>” at the end of the file?) to enqueue that?

So, yes, separate JS file containing just your own JS code. Your JS will likely need the noConflict wrapper I mentioned earlier. Add the enqueue code also mentioned earlier to functions.php that references the JS and CSS files. This is a structured way to add meta links to the code pages that resolves dependencies. By passing ['jquery'] as a dependency argument, the local jQuery library will be loaded before your script. The added PHP code can simply go at the bottom of the file. It’s typical to omit the closing ?> on PHP pages that are solely function or class declarations. If we were to include it, trailing whitespace afterwards can cause difficult to find “Headers already sent” errors since the whitespace outside of PHP delimiters is sent to the browser. No closing ?> and trailing whitespace is ignored in PHP, so no chance of errors ??

Am I dropping this at the end of my functions.php file (like I said I’m ignoring the CSS as I’m just applying that to the one page, but if that doesn’t work will do the same) exactly like this (where do I put the ‘jquery’ part?):

wp_enqueue_script( string $handle, string $src = ‘main.js’, array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

add_action('wp_enqueue_scripts', 'my_enqueue');
function my_enqueue() {
  wp_enqueue_script( 'my_js', get_stylesheet_uri() .'/js/main.js', array('jquery'));
}

I’m assuming your file is in a /js/ folder within your theme’s main folder. Adjust the path as necessary for your specific situation.

“GET https://thepostrider.com/wp-content/themes/lovecraft/style.cssmain.js?ver=4.9.8&nocache=1 404 (Not Found)”

It looks like this is related to the main.js file, which has the following:

$("path, circle").hover(function(e) {
  $('#info-box').css('display','block');
  $('#info-box').html($(this).data('info'));
});

$("path, circle").mouseleave(function(e) {
  $('#info-box').css('display','none');
});

$(document).mousemove(function(e) {
  $('#info-box').css('top',e.pageY-$('#info-box').height()-30);
  $('#info-box').css('left',e.pageX-($('#info-box').width())/2);
}).mouseover();

var ios = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if(ios) {
  $('a').on('click touchend', function() {
    var link = $(this).attr('href');
    window.open(link,'_blank');
    return false;
  });
}

Incorrect paths are a common problem when enqueuing. Always worth double checking them and adjusting the enqueue code as necessary.

add_action('wp_enqueue_scripts', 'my_enqueue');
function my_enqueue() {
  wp_enqueue_script( 'my_js', '/wp-content/themes/lovecraft/main.js', array('jquery'));

}

Now it looks like it’s loading main.js correctly on the page, but the console errors I’m getting now are:

“Uncaught TypeError: $ is not a function
at VM504 main.js:1”

In reference to the main.js file (which my content is all of exactly from the post above). I get the feeling this is related to that no conflict wrapper you mentioned earlier, so I wrapped `(function( $ ) {

“use strict”;

<all the javascript from main.js here>

})(jQuery);`

Now it looks like the console errors are gone – but still no map.

My apologies for dragging this along – I’m quite new to this but very excited to get the map working, and learning plenty along the way! ??

Did you simply paste the map HTML into post content? If not, how is it getting on the page?

In any case, the HTML is corrupted. I think if that is resolved, the map should display. Looking at your page source in my browser, it’s highlighting corruption in red. YMMV. All of the SVG code is red, which isn’t very helpful. I don’t see anything wrong there. However, there is a stray <html> tag just above all the SVGs. I’ve no idea how it got there or where it’s coming from, but it needs to go. Maybe when that’s gone, the browser will be happy with all the SVGs.