Clickable Interactive map tutorial - building & designing for BEGINNERS - HTML, CSS, JS

Having an interactive map on your website is a fun way to engage your users and add interactivity to your page. This is a simple tutorial on how to design and build an interactive clickable map with some toggle text. I explain how I research code snippets and apply them to my work. I used basic JS, CSS, and HTML. When you click on the markers the text will pop up.

STEPS:
Preparing the assets
1. source a map from the internet or create your own;
2. Trace it. Tick ‘ignore white’ ;
3. Export at as SVG;
4. Copy the code.

Setting up (HTML) - 1:51 min
5. Paste your SVG code in the HTML field;
6. Find your markers. If they are circles, they’ll be marked as ‘circle’ automatically. Give each of them a name/class (i.e. marker-Russia);
7. Add other content like text that you want to appear (or it can be an image or whatever);

Styling (CSS) - 5:47 min
8. I went ahead and added some background and styled the text a bit. Usually, try to do it at the end.
9. IMPORTANT I added position:absolute; to all our text blocks. This allows you to play with positioning;
10. So, I added ‘top’ and ‘left’ properties to position our text boxes in the right places next to the appropriate marker;

JS - 8:42 min
11. Looked up for the JS code snippet. It’s easier to find it online and steal instead of writing from the scratch. Firstly, you’ll learn more tricks browsing, secondly, will avoid typos;
12. Copy and paste the found code, change the classes, so it’ll link the action (i.e. toggle) with the right element (i.e. .russia-txt);
13. Repeat for all the markers;
14. Add ‘hide’ command to hide the elements that are not supposed to be visible till you click the marker;
15. Add the same ‘hide command’ line after each ‘click command’ so every time you click a new marker all hide elements will hide back;

CSS (proper) - 15:36 min
16. Go wild! Play around with fonts, colors and backgrounds. I added some border, padding to give our text elements some room to breathe, changed font sizes.

You are done! Easyyyy

If you have any questions comment below, I’ll be happy to help 🥰

RESOURCES:
You can take the code from here:

For more of my design work check my Dribbble account:

Let's connect! My Instagram:

Resources I used:

When working on a project, make sure you use icons/images/etc suitable for commercial use.

[antonymziie]

i've been wanting to integrate a custom map onto my website for a while!! this tutorial has done wonders for figuring out how to get it to work. thanks a bunch :]

[HCgamer]

For anyone that doesn't want to use circles as markers, an easy way to find your markers in the SVG code is to make your marker a distinct color that isn't anywhere else on the map. Then either "ctrl+f" and input the hex color of the markers if u already know it, or look up a hex color picker where u can upload your image, then pick take the hex color from there and use "ctrl+f". This will let u find your markers since they are all the same distinct color! Just used this for my map and it worked great! :)

[aduck]

In college rn, designing a website that needed this, will try to implement it i'll update if i remember

[taptunia]

If coding were always explained so easily maybe I would’ve actually remembered something from my uni classes lmao. Thank you!

[rehanpetit]

Thank you so much. Been trying to learn this and this video just saved my life.

[geohost]

Interesting piece of art in the background lol. Thanks for the tutorial

[wesleycruncher]

nice thanks your expalanation is very clear. good luck with your personal projects.

[nataliabarszcz]

This is so helpful, thank you! Didn’t know integrating a map would be so easy!

[Cerulian]

Yes, it would be very helpful how to add this to a WordPress website. Please make a video on that. 😀

[josemariadiy]

Good video 👍
But what about responsive????🤔🤔
The Image and circles links are resized??? 🤔
How to do it...

I would appreciate your answer..

[alantapiaavila]

Excellent content !
I hope you keep doing more videos.

Greetings from Mexico.

[samsonmabetho]

you just earned yourself a new subscriber. This was really helpful. Thank you

[joelfigueroa]

thank you this is perfect for my school proyect! so helpful!

[cynthiaguilera]

Hello! How did you get from cx= and the city=? Pardon my ignorance, but I'm following the tutorial and I'm stuck there... Help please 😢

[adamzellmer]

I had a similar map we created. we ended up needing to add another section to the map so we downloaded it from the website and brought it into Illustrator added the new graphic and then when exported again lost all the links to the hot spots. Is there a way that you know of to edit back in Illustrator and keep all of the code intact?

[BideaweeBideawee]

Awesome tutorial! Do you have a video on how to integrate into a Word Press website?

[saachipilinja]

Thanks so much! This is very well explained and informative!!

[zoesnyder]

How did you get the circles you drew to each have the class 'circle'? Was it because you used the circle tool to draw them in Illustrator?

[tobiaslukaschek]

Nice video! Do you have a video tutorial showing how to add it to SquareSpace?

[eshapilinja]

Fun, crisp and clear. Would love to see more videos 😊