Create a Clickable (HTML5) US Map in Minutes!

hey my name is pat flynn and welcome to create a clickable map calm or you can easily build your own customized clickable html5 compatible map without the developers or learning how to code or wasting time or money or any of that stuff now this is going to be a quick video tutorial to show you how to use a tool and what you can do with it so let’s get started okay so the first setting here is for the width and the height of your map these two numbers are proportional so let’s say the width of the content area on your site that you’re posting this map on is 600 pixels wide so I’m going to change this to 600 hit enter makes it the perfect size for you so it still looks nice on your site there you go now the font just click on this drop-down menu to change the font there Allstate’s color what this does is if you click on this it opens up a color picker and you can change the colors of all the states below just like that now if you have a specific color that you want to match on your website just grab the hex code you could paste it right in here make sure that pound symbol is there right at the beginning and there is a way to change the color of an individual state but imma show you how to do that in a little bit states hover color that’s the color of the state when you hover over it with your mouse I’m going to change this to just like a teal really quick just to show you this just makes it nice and convenient for your users so that they know what state they’re clicking on now background color is just that that’s the color of the background behind your map or around it and as you can see the yellow there and the reason this is here is because if you’re not using a white color you know I still wanted to give you the option to change it to whatever your background color is so that it blends well on your website label color is the color of the label of each state as you can see below right now it’s black I’ll just change this to notes a white right now just so you can see it working and there you go now each label is white except for the ones on the outside here which I couldn’t fit in the individual state because they’re so small so that’s the East Coast states and also Hawaii this is different there’s a separate option for here for that color if you want to change there that’s outside label color I’m not going to change it for you right now hover label color that’s the color of the state when you hover over it so as you can see it’s teal with white on it I’m not going to change it here for you but if you wanted to change the text color when you hover over it that’s how you would change it border you can actually change the state of the border here from solid to dashed which looks pretty cool you can actually change the color of that as well which looks quite nice that’s up to you and you can also have no border if you want now these settings here on the right-hand side are a little bit more complicated not too complicated but if you ever forget you can just hover over this question mark and I’ll tell you exactly what it does if you click show HTML links it’s not going to change anything in the preview but when you generate your map script and you paste that code on your website what’s going to happen is it’s going to show the map exactly how you have it set up but also underneath it’s going to show a table and that table is going to include a link of all the states that you have links for you know neatly organized so that’s up to you if you want that I’m going to unclick that links open new window if you click on this when someone clicks on a state and they click on that link it’s going to open up at a new window if you click this off and they click on a state with a link on it it’s going to open up in that same window so that’s up to you show link titles in order to show you what this does actually have to show you how to add the link title and URL for each of these states and it’s really easy all you have to do is click on a state so I’m going to click on California for example and enter the link title maybe my niche site or whatever is in pet supply so I’m going to do California Pet Supply and then the link is whatever that link maybe California com and this is where you can actually override the alt States color with with another color picker here can put a hex code if you want or I’m just going to change this to a to a teal and when I click out of this as you can see it’s teal because I overrode that color and you’ll see a little asterisk next to the state abbreviation there and that just tells me that I have information for the state already this asterisk isn’t going to show up on the map when I paste it on my website that’s just for your convenience so you know what states you have left to do now when I hover over this is you can see down here below above this button here it says California pet supply that’s the link title if I click show link titles off it’s not going to show that anymore when I hover over so that that’s completely up to you if you want to use that option and then call to action here that’s this text here above above this the United States or whatever map you’re using so I’m going to actually change that to where do you live you know it could be whatever you want but there you go where do you live and now they can click on wherever they live now when you’re done with your map all you have to do is click on generate map script and you’ll see a little pop-up come up it says would you like to save this map now in order to save this map so you can come back to it later and make unlimited changes you know maybe you are going to be continually updating it or the links happen to change a lot you can save this map for a small one-time payment of only nine dollars in $0.99 if you click yes please save this map it’ll take you to PayPal you can pay using PayPal or credit cards up to you that helps and you know helps keep the server going and all that good stuff or you can get the code for free you don’t have to pay anything and you get a fully functional html5 map you just can’t come back and make changes to do that you can click on no thanks I don’t want to pay and then you have your code right here just copy this and copy it to your clipboard and paste it on your website in HTML if you’re on a wordpress site you paste it in your HTML tab not on your visual tab or you know if you want to pay for it you click on this and like I said you go through PayPal billing once you you pay you will get an email in that email there will be a link that that will take you back to your map as you saved it and you can update anything resave it and then and generate the map script and go from there and paste out on your website you can always come back to it you can bookmark that link or just save it in your inbox or whatever and that’s how it works thank you guys so much for checking out the tool and using it you know if you have any questions check out the FAQ which is linked to at the bottom of the page if you have any specific questions for me you can also send an email to help at create a clickable map com I plan to add more and more different maps in the future if you don’t see more than just the ones that you see on the site right now and also if you want to spread the word and help me out a little bit you can click on this like button here at the top to just sew shows show some social love so that’s it thank you guys so much I appreciate the support and enjoy the tool I hope you get some good use out of it and all the best talk to you soon