We built an open-source map of Wales with 1,960 hand-picked locations you can embed on your website or blog for free

Hi everyone,

I'm Nick, the founder of Wales.org.

I wanted to share something I've been working on for quite a while now that I think (hope) you will find useful.

It's an open-source interactive map of Wales with over 1,960 hand-picked locations across 18 filterable categories — castles, beaches, hiking trails, hidden pubs, dog-friendly walks, food and drink and I've built it to be embedded on travel sites without it competing with their businesses.

The bit that took the most thought was how to make it partner-safe?

The version on wales.org has affiliate links in pin popups (Viator for experiences, HolidayCottages.co.uk for stays). That's how we monetise.

But the moment the map embedded I realised that a holiday cottage operator in Pembrokeshire embedding our map on their site would be putting competitor affiliate links on their own listing pages. Same for any experience-day provider vs. the Viator buttons. Nobody with sense would embed that!

So the embed automatically detects context:

On wales.org the full version have the affiliate links visible (we earn commission)

In an iframe on a partner site the affiliate buttons are hidden, only the "Designed by Wales.org" URL at the bottom remains = partner-safe behaviour.

Detection is via `window.self !== window.top` plus a URL-path check. No configuration needed from anyone embedding it. There's also a CSS fallback to hide affiliate buttons even if the JavaScript ever fails — belt-and-braces partner safety!

The result?

For example, a Welsh cottage operator can now embed our map on their listings page and it won't redirect their customers to any of our affiliates. A tour provider can embed it on their experiences page and it won't push visitors to Viator. The designed by Wales.org link stays because that's the legitimate quid pro quo of free use and they give the host site valuable contextual content for visitors.

Build details (for the curious):

- Leaflet + Leaflet.markercluster, vanilla JS, no framework, no build step
- 1,963 pins held as static JS — no API calls on page load
- Three data layers: 170 handcrafted, 664 Google Places verified venues, 1,129 additional Google-verified pins
- Standalone HTML at `wales.org/embed/` that bypasses WordPress entirely — so the embed isn't affected by CMS updates, plugin conflicts or theme changes
- Open-source under MIT — fork it for your region
- Mobile-first popup and filter UI, fully keyboard-navigable

What I'd love from this community:

1. Try the embed.

If you run a travel site, blog or DMO and want to give your readers a richer "places to visit" tool than Google My Maps, grab the iframe from `wales.org/embed/`. Click pins on your test page and verify for yourself that the affiliate buttons stay hidden. Free with attribution.

2. Fork it for your region.

The architecture is location-agnostic — swap the pin data, re-centre the map, and you've got an interactive map of Cornwall, the Highlands, the Lake District, Provence, Tuscany or wherever you may be. If you do this, drop me a line — I'd love to see regional forks happen!

3. Tell me what's missing.

If you've worked on travel maps before and there's an obvious feature gap, a cleaner way to do something or a tourism use case the partner-safe behaviour should cover that it doesn't yet.

👉 Live demo: wales.org/interactive-map-wales/

🗺️ Free embed: wales.org/embed/

👾 Code: github.com/walesorg/wales-interactive-map

Happy to answer questions on the build, the partner-safe detection logic, the pin data sourcing, the WordPress integration, or anything else.

Cheers,
Nick

This looks amazing. This year we are going on a roadtrip to Scotland with our dog, but next year it might be Wales! Very interesting post!

Hi Nick, thanks for sharing your project with the Travel Massive community.

It's fantastic to see a new open-source travel project so thoughtfully presented. As a developer I know how much effort went into preparing this for an open-source package, and to share it in the wild — so bravo!

Please keep us posted on any interesting forks or use-cases you see with your project. Perhaps someone makes a map of best coffee shops in Melbourne, or co-working and meeting places in Sofia (@maria-stoyanova). Or maybe a map of all the micronations in the world! (@global_gaz).

Perhaps to help non-technical folk, you could write some example prompts (e.g. for Claude, etc) to fork a new map and customise with the user's own co-ordinates or place set? This might get some faster adoption of the map.

And, this reminds me that I have not been to Wales yet. So, I need to visit!

The below looks scary and long, but it's mainly prompt text that you copy and paste and few extra tips at the end.

How to Build Your Own Interactive Travel Map Using AI

No coding required — about 25 - 30 minutes start to finish

This guide shows you how to copy the open-source Wales.org interactive map and turn it into a map of your own region, on your own website. You don't need to know how to code. An AI assistant (ChatGPT or Claude) will do the hard work for you. I recommend using Claude, but your choice.

You just follow the steps.

What you'll need before you start:

A computer (Windows, Mac, or Linux)
A free ChatGPT or Claude account
A free Google account (for the Google Maps key)
A credit or debit card (for Google's free tier — you will not be charged, see Step 4)
A WordPress website where you'll display the map
About 30 minutes

Step 1: Download the map files

You'll start by getting a copy of the original map files onto your computer.

Open this link in your browser: github.com/walesorg/wales-interactive-map
Find the green button on the page that says Code (it has a small <> symbol next to it). Click it.
A small menu will drop down. Click Download ZIP at the bottom of that menu.
The file will save to your computer's Downloads folder.
Find the ZIP file and double-click it to unzip (extract) it. You'll now have a regular folder.
Open the folder. The two files that matter are:


index.html — the part people see
map.js — the part that does the thinking

Keep this folder open. You'll come back to it.


Step 2: Install a proper text editor (very important)

You will be opening and editing code files. Do not use Microsoft Word, Google Docs, Apple TextEdit, or Notepad to do this. They secretly change straight quotes into curly "smart quotes", which instantly breaks code.
Install Visual Studio Code — it's free, works on Windows, Mac and Linux, and is what most professional developers use.

Go to code.visualstudio.com
Click the big blue download button (it auto-detects your operating system).
Open the file once it downloads and follow the prompts to install it.
Open VS Code once it's installed. You're done — you'll use it in later steps.

That's all the setup you need.


Step 3: Write down the places you want on your map

Open VS Code, click File then New File, and type out a list of every place you want to appear as a pin. It can be 5 places or 500 — your choice - you can even get Ai to put the list together for you.

Save the file somewhere easy to find (Desktop is fine) and call it my-places.txt.

Example list:
The Golden Lion Pub, Newport
Snowy Mountain Hiking Trail, Snowdonia
The Best Coffee Shop, Cardiff Main Street
Pembrokeshire Coastal Path

Tip: be as specific as possible. "The Golden Lion Pub, Newport, Wales" gets a better result than just "Golden Lion Pub" because there are dozens of pubs with that name.


Step 4: Get your free Google Maps key

AI is very clever, but it cannot accurately guess GPS coordinates. If you ask it where a local pub is, it might drop the pin in the middle of a field. To fix this, the AI uses Google Maps to find the exact address. To let it do that, you need a free "key" from Google.

Go to console.cloud.google.com
Sign in with your Google account.
At the top of the page, click Select a project, then New Project. Give it any name (for example: "My Travel Map") and click Create.
Once the project is created, use the search bar at the top and type Geocoding API. Click the result.
Click the blue Enable button.
In the left menu, click Credentials, then Create Credentials, then API Key.
Google will show you a long string of letters and numbers. This is your key. Copy it and paste it somewhere safe (a note on your computer is fine for now).

About the credit card: Google asks for a card to confirm you're a real person — this is to stop bots. You will not be charged for normal use. Google gives every account 10,000 free Geocoding requests every month. For most travel maps with a few hundred locations, you'll never come close to using up the free tier - I have nearly 2,000 locations on mine and did not come close to paying for it.

(continued in next comment — Part 2 of 4)

(Part 2 of 4 — continued from above)

Step 5: Use AI to turn your list into map pins

Now you'll ask the AI to take your simple text list and turn it into proper map data, with the correct GPS coordinates for every place.

Open ChatGPT (chatgpt.com) or Claude (claude.ai). A free account is fine.

Start a new chat.

Copy the prompt below. Fill in the two square-bracket sections with your Google key and your list of places. Then send it.

For the "Pick a sensible category (for example: Food & Drink, Hiking, Beaches, Castles, Accommodation, Family, Hidden Gem)" part of the prompt below you can change the examples to suit what you are looking for

Prompt to copy and paste:

I am building an interactive travel map and I do not know how to code, so please walk me through this clearly.
I have a list of places. I need their exact GPS coordinates and the result formatted as map pin data I can paste into a JavaScript file.
Please write a simple Python script that uses my free Google Maps Geocoding API key to find the rooftop latitude and longitude for every place on my list. Then run the script (or show me how to run it step by step) and give me the final result formatted as a JavaScript array, where every pin looks exactly like this example:
{"name": "Place Name", "lat": 51.5074, "lng": -0.1278, "category": "Food & Drink", "description": "A short description."}
For each place, please:

Pick a sensible category (for example: Food & Drink, Hiking, Beaches, Castles, Accommodation, Family, Hidden Gem)

Write a short, friendly one-sentence description

My Google API key is: [PASTE YOUR GOOGLE KEY HERE]
My list of places is: [PASTE YOUR LIST OF PLACES HERE]


What happens next: The AI will produce a neat block of JavaScript code with all your places and their exact GPS coordinates already filled in. Copy this block. Open VS Code, paste it into a new blank file, and save it as my-pins.txt on your Desktop. You'll use it in Step 7.
If the AI can't run the script itself, it will give you very clear copy-paste instructions to run it on your own computer — just follow them. If you get stuck, paste the error message straight back into the chat and the AI will fix it.


Step 6: Use AI to point the map at your region

The map is currently centred on Wales. You need to tell it to look at your region instead, and update the filter categories (Castles, Beaches, etc.) to suit your topic.

Open VS Code.
Click File then Open and choose the map.js file from the folder you unzipped in Step 1.
Once it's open, press Ctrl+A (Windows/Linux) or Cmd+A (Mac) to select all the text. Then press Ctrl+C or Cmd+C to copy it.
Open a new chat in ChatGPT or Claude (a fresh one — don't reuse the chat from Step 5).
Copy the prompt below, fill in the two bracket sections, paste your code at the end, and send.

Prompt to copy and paste:

Act as an expert web developer. I have the open-source code for an interactive travel map, and I want to repurpose it for a different region and topic. I do not know how to code, so please do the heavy lifting for me and explain anything I need to do in plain English.
My new target region is: [INSERT YOUR REGION — for example: Cornwall, England, or Melbourne, Australia]
My map's topic is: [INSERT YOUR TOPIC — for example: family days out, specialty coffee shops, dog-friendly walks]
Please do the following:

Find the part of the code that centres the map on Wales, and change the latitude, longitude and zoom level so the map opens centred on my region instead.
Update the filter categories so they match my topic (replace categories like Castles, Beaches and so on with ones that fit).
Delete all the original Wales map pin data so the pin list is completely empty and ready for my new pins.
Do not change the partner-safe iframe detection (the part with window.self !== window.top). That code keeps the map safe to embed on other websites, so it must stay exactly as it is.
Give me the full updated code back as one single block I can copy and paste, and tell me exactly where in the file my new pins from Step 5 should go.

Here is the original code: [PASTE ALL THE TEXT FROM map.js HERE]


What happens next: The AI will give you a brand-new version of the map.js code, ready for your region. Keep this chat open — you'll use it again in the next step.

(continued in next comment — Part 3 of 4)

(Part 3 of 4 — continued from above)

Step 7: Put it all together (let the AI do it)

Instead of editing the file by hand, ask the AI to give you the finished map.js with your pins already inside it. Go back to the same chat from Step 6 and send this:

Please take the updated map.js code you just gave me, paste my pins into the empty pin data section, and send me back the complete finished file as one single block of code I can copy and paste straight in. Do not leave any blanks for me to fill in.
Here are my pins: [PASTE YOUR PINS FROM STEP 5 HERE]

The AI will reply with the full, finished map.js. Now you just need to put it on your computer:

Open the map.js file in VS Code.
Click anywhere inside the file, then press Ctrl+A (Windows) or Cmd+A (Mac) to highlight everything.
Press Delete on your keyboard.
Copy the new code from the AI chat and paste it in.
Press Ctrl+S (Windows) or Cmd+S (Mac) to save.

Test it before going live: Open the folder you unzipped in Step 1 and double-click index.html. It will open in your web browser, and you should see your map with all your pins. Click a few to make sure the names and descriptions are right.

If anything looks wrong, take a screenshot, go back to the AI chat, describe what's wrong in plain English ("the pins aren't showing" or "the map is centred in the wrong place"), upload the screenshot and ask for a fixed version.

Step 8: Upload the map to your WordPress site

This is the easiest way to get your files onto your website without messing about with server logins.

Log in to your WordPress dashboard (usually at yourwebsite.com/wp-admin).
In the left menu, click Plugins then Add New.
In the search box, type File Manager (the popular one has a yellow folder icon and over a million installs).
Click Install Now, then click Activate.
A new item called WP File Manager will appear in your left menu. Click it.
You'll see a list of folders that make up your website. Right-click in an empty area and choose New Folder. Name it mymap (all lowercase, no spaces).
Double-click your new mymap folder to open it.
Drag the index.html and map.js files from your computer straight into the WP File Manager window. They'll upload automatically.

Step 9: Show the map to your readers

Now you'll embed the map into a page or blog post.

Open the WordPress page or post where you want the map to appear (or create a new one).
Click the + button to add a new block.
Search for Custom HTML and select it.
Paste the following code into the block, replacing yourwebsite.com with your actual domain:

<iframe src="yourwebsite.com/mymap/index.html"; width="100%" height="600px" style="border:none;" loading="lazy" title="Interactive map"></iframe>

Click Preview (top right) to check it looks right.

When you're happy, click Publish or Update.

Visit the page on your live site. You should now see your fully working interactive map. Congratulations — you just built a working web app!

(continued in next comment — Part 4 of 4)

A few extra tips

Make it rank on Google: Add a short paragraph above and below the map explaining what the map shows, who it's for, and what people can do with it. This gives Google something to read and helps your page appear in search results. Include words people would actually search for (for example: "interactive map of family days out in Cornwall").

Make it work on phones: Most of your visitors will be on a phone. Open the page on your own phone and check the map loads, the pins are tappable, and the popups don't get cut off. If anything looks off, paste a screenshot into ChatGPT or Claude and ask for a fix.

Add affiliate links the right way: If you want to monetise the pins (with booking.com, Viator or any other affiliate), ask the AI in a new chat:

"In this map.js file, please add a professional looking affiliate link button that is perfectly sized inside each pin popup. The button should link to [your affiliate URL pattern] and only show on my own website — not when the map is embedded on partner sites."

Then paste your map.js code below the prompt.

The partner-safe detection built into the original code will keep affiliate links hidden when other sites embed your map.

If something breaks, don't panic: Open the AI chat where you built the file, paste in the error message or describe what's gone wrong in plain English, upload a screenshot and the AI will tell you exactly what to do. There is almost no problem at this scale you can't fix with one more prompt.

That's it. You've just built an interactive travel map without writing a single line of code yourself!

Putting this map on your website will improve dwell time and engagement signals. Your visitors will spend far longer clicking, filtering and exploring an interactive map than reading a static list. Google will read that extended time on the page and the lower bounce rate as a strong quality signal and will lift that page ranking over time....

If you have any questions or get stuck at any point please reach out and I will be more than happy to help.

Great work Nick, you get your first star on github ;-) I wish I'll have time to fork it or recentre it somewhere near me.

Should I request the "full screen" button on there or is it ok to just mention it here?

This looks like an amazing job, that took a lot of care and consideration. Well done!

Think you for adding the Build details, because that was my next question.

You’ve done a wonderful job! Now you’ve made me want to do the same for Tuscany!