Creating an interactive map on WordPress: A step-by-step guide

I have successfully created a clickable image on Codepen

<div style="width: 1000px; height: 993.73px;">
        <img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg" 
             
             alt="Clickable Image" usemap="#image-map" style="max-width: 100%; height: auto;">
    </div>



    <map name="image-map">
        <!-- Define the clickable areas using the shape and coords attributes -->
        <!-- Replace x1, y1, x2, y2 with the appropriate coordinates for each area -->
        <area class="hoverable-area" shape="circle" coords="670, 772, 50" onclick="openOverlay('https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/244385201_1048371782579748_121321210670771508_n.jpg',
            `<table>
                <tr>
                    <th>Last Name</th>
                    <th>First Name</th>
                    <th>Address</th>
                    <th>Month</th>
                    <th>Year</th>
                    <th>Age</th>
                    <th>Grave ID</th>
                </tr>
                <tr>
                    <td>John</td>
                    <td>Sarah</td>
                    <td></td>
                    <td>Chwefror</td>
                    <td>1912</td>
                    <td>81</td>
                    <td>1</td>
                </tr>
                </table>`);" alt="Area 1"/>
        <!-- Add more areas as needed -->
    </map>



    <div id="overlay" class="overlay" onclick="closeOverlay()">
        <div id="popup" class="popup">
            <img id="popup-image" src="" alt="Popup Image">
            <p id="popup-text"></p>
        </div>
    </div>

https://codepen.io/charlie-enright/pen/mdQvwrw

My project involves a churchyard survey, with only grave 1 currently being clickable as a test. The code functions correctly in Codepen, but I am unsure of how to integrate it into a WordPress page.

I attempted to paste the HTML into the text editor on WordPress and utilized the header and footer plugin for CSS and JS, but was unsuccessful. Can someone provide guidance on where the HTML, CSS, and JavaScript should be placed in WordPress to ensure functionality on a page?

Thank you.

Answer №1

To utilize the new block-based post editor in WordPress, be sure to employ the "Custom HTML" block: https://i.sstatic.net/6wBKN.png

This allows your code to be inserted directly onto the website without any alterations:

https://i.sstatic.net/THhiC.png

(even if it means potentially overflowing the page, similar to what is demonstrated here)

For those using the Classic Editor plugin, switching to Text mode at the top-right corner will grant access to paste your HTML code.

If necessary, CSS and JavaScript can be added inline using <style> and <script> tags specifically for a single webpage.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inject HTML code containing a function that triggers upon button press

I am facing a challenge in inserting code through a submit button. Essentially, I am looking for this button to trigger a PHP function that adds a block of HTML code. Below is the function: function addTrainee(){ print_r('<form method="post&qu ...

Issues with the POST API functionality in an express / node.js application when using mysql database

Recently, I have been diving into learning nodejs and experimenting with creating a post API that interacts with static data stored in a MySQL database. Let me briefly share the configuration setup I am working on: const mysql = require('mysql') ...

I'm encountering some issues trying to install next-auth in my project built with Next.js and React

I recently set up my Next.js project with React using yarn create next-app. However, I am facing an issue as the next-auth package is not installed in my project. Currently, my node version is LTS 16.15.1, yarn version is 1.22.18, and npm version is 8.9. ...

Load HTML 5 video on a webpage after all other elements have finished loading

Hello there! I'm trying to figure out a way to load an HTML 5 video after the page has already loaded. Currently, the video pauses all site interaction until it's fully loaded, but I'd prefer to have it display an image first and then autopl ...

What is the best way to retrieve widget options when inside an event?

Creating a custom jQuery widget: jQuery.widget("ui.test",{ _init: function(){ $(this.element).click(this.showPoint); }, showPoint: function(E){ E.stopPropagation(); alert(this.options.dir); } } Initializing the cu ...

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

Having trouble saving user input from a form to a database using axios, mongodb, and vue?

I am a beginner in working with Vue and I'm currently facing an issue while trying to submit user input data to my MongoDB using axios. Although the data from the database is displayed on the page, I can't seem to get the form input data to succe ...

Customize YouTube iframe styles in Angular 4+ with TypeScript

Has anyone been successful in overriding the style of an embedded YouTube iframe using Angular 4+ with TypeScript? I've attempted to override a CSS class of the embed iframe, but have not had any luck. Here is the URL to YouTube's stylesheet: ...

How can I define a schema attribute for a controller in Express JavaScript?

Hello, I am brand new to exploring stack overflow and the world of development. I have been self-teaching myself how to code using React and Express, so please forgive me if my question seems basic or implausible. I still have many fundamental gaps in my k ...

Add HTML code to the dataTable

I am working on an ajax function that receives HTML response containing table data like this: <tr><td>data1</td>td>data2</td>td>data3</td></tr> My question is, can I add this response to a dataTable row in the fo ...

My Node/Express service seems to be generating a span in the logs, but I am unable to locate my service in the Ja

Currently, I am in the process of setting up Jaeger tracing for my Node.js microservice using Express.js. After adding a basic GET request handler in my Express app and hitting the endpoint via curl, I notice that a span is created in the logs. However, w ...

The knockout click event isn't functioning properly for a table generated by ko.computed

My goal is to connect a table to a drop-down menu. Here are the key points of what I'm trying to achieve: The drop-down should list MENUs. Each MENU can have multiple MODULES associated with it, which will be displayed in the table based on the ...

Error: Unable to access the 'map' property of an undefined object......Instructions on retrieving a single post

import React,{useEffect, useState} from 'react' //import {Link} from 'react-router-dom' import { FcLikePlaceholder, FcComments } from "react-icons/fc"; const SinglePost = () => { const [data,setdata] = useState([]) co ...

Tips on removing either the date or time when input type date and input type time share the same ng-model

In my Ionic app built with AngularJS, I have a form where the date and time are displayed separately but share the same data-ng-model: <input type="date" id ="actualVisitDate" data-ng-model="actualVisitDate" required> <input type="time" id ="actu ...

How to use Ionic 3 to automatically scroll ion-scroll content all the way to the bottom

My ion-scroll component is experiencing some challenges <ion-scroll scrollY="true" style="height: 52vh;"> {{ text }} </ion-scroll> The content inside the ion-scroll keeps expanding, exceeding the designated height. Users can manually scroll ...

Implementing TypeScript type definitions for decorator middleware strategies

Node middlewares across various frameworks are something I am currently pondering. These middlewares typically enhance a request or response object by adding properties that can be utilized by subsequent registered middlewares. However, a disadvantage of ...

React JS is having trouble rendering an object that contains a list as one of its elements

I've been attempting to display the P_words list element with React using map: const f_data = { key: 2412, reviewed: 100, rating:4, P_words: [{ word: "Coolx", freq: 5 }, { word: "Dumbf&quo ...

What is the best method for removing extra spaces from an input field with type "text"?

I have an input field of type "text" and a button that displays the user's input. However, if there are extra spaces in the input, they will also be displayed. How can I remove these extra spaces from the input value? var nameInput = $('#name ...

How can I define boundaries for objects in Three.js?

How can I customize the border width and color of a polygon/polyhedron created with three.js? The example code below shows a figure, but I'm unsure how to set borders. Are there alternative methods for creating polygons? <html> <head> ...

Issue: Incompatibility in metadata versions detected for module .../ngx-masonry/ngx-masonry.d.ts. Level 4 version identified, whereas level 3 version

When using ngx-masonry, I encountered the following error message- ERROR in Error: Metadata version mismatch for module .../ngx-masonry/ngx-masonry.d.ts, found version 4, expected 3 Specifications: Angular 4 ngx-masonry 1.1.4 ...