Breaking

Thursday, April 16, 2020

How to Add a Map with Pins to Wordpress (Image Maps) #Best Education Page #Online Earning

How to Add a Map with Pins to Wordpress (Image Maps)


hello is Alex here from WP eagle com in
this video we're going to be adding an
image to our WordPress website and this
image is going to be of a map and then
to that map we're going to add some pins
to basically label some areas up you
might obviously might find this useful
for your contact us page your locations
page something like that you can also
use this plug-in to add pins or labels
to whatever image you like so yeah
really flexible I'll show you that demo
now just put you put it up on the screen
for you to have a look at this is the
developers demo site and obviously
because he has lots different features
lots of different colors all sorts of
things and yeah we're gonna be setting
up just a very simple version of this to
get you up and running so then you can
obviously play around customize it as
much as you like sorry without any more
chitchat for me let's get started
now the plugin we're gonna be using is
this one here called image map hotspot
WordPress plug-in which rolls off the
tongue quite nicely doesn't it I'll put
a link up on the screen now where you
can go and get it it's $18 very
reasonably priced over on code Canyon
net if you use my link I'll be most
grateful and it's a really cool plugin
and it allows you to basically add what
are called hot spots to an image and in
this case we're going to use a map and
but you could use any image so if you
just wanted to have an image of say a
dog and label up different bits of the
dog or a landscape and put you know
little pins as to you know what the
buildings are something like that
there's loads of things you could do
with it so yeah a really handy plugin to
have so yeah pop over to code Canyon
purchase it and download it I'm gonna
download it now so yeah that's just
download a zip file and just remember
where you downloaded it to and then
you're gonna need to go to your website
I'm gonna work on this website which is
my most recent demo if you want to build
a site like this I've got a video up
I'll put it up on the screen now you can
go and check it out yeah and in that
video we basically start with nothing
and end up with this really great
website um but what I'm gonna do stay
off see is add a picture of the USA and
I'm gonna add some pins to it so let's
install that plug-in
so I'm already logged in I'm gonna go
into the dashboard and then I'm down to
plugins and add new and then click this
button here which is upload plug-in and
then we need to choose that file that we
just downloaded from code Canyon so I've
got it in here just select that zip and
click install that's all done and then
we click activate and we're ready to
upload our image so hopefully you've got
your image that you want to add some
pins to umm because you're gonna need it
in a second and then we've got this new
option here on the menu called
image hotspot so if we go into add new
hotspot I'm gonna call it USA and then
here we upload our image so I'm just
gonna click upload files and then select
the image from my computer
put it here ready
click news now and then what I'm gonna
do is I'm going to click publish just so
that we can see the image down the
bottom there's our image so now we can
easily add some pin so we've already got
one here pop over one I'm going to call
this one head office you can add some
more content here that's New York HQ
click Save
and then I've got this is here you see I
can just drag it to where I want it so
that guy over here in New York somewhere
there I love so we can change the icon
if we go up here you can change your
icon here icon to is the little blue I I
think a pin might look good or map
marker I think maybe icon six might look
good let's do that
there it is
no you currently see it so let's try
something different let's go for the I
think the actually the green was quite
nice but let's try icon to open safe
here and as a few other options you've
also got you can add a label you can set
the width you can add a link so that
when someone clicks it they go somewhere
so yeah that little eye looks okay we
can add another one add more popover
which is obviously excellent English and
a branch office or regional
sales office this one could ever
different icon let's try the other pin
so that's there oh I can grab ahold of
it yeah this could be down in Texas
somewhere and there we go so now we're
ready to put it onto a page and there's
some other options you can play with
down here obviously to customize it as
you like but we'll just go straight
forward for this video and I want to
drag on all day so in order to add it to
a page all we need is the shortcode and
shortcode we'll find over here
and all I need to do is just copy this
so I'm just gonna highlight it I'll
right-click copy and then I'm going to
create a new page on the website so I'm
gonna go to new page locations and then
all I need to do is just paste that
piece of shortcode or whatever into the
page just like that so I just did a
control V there but I could have done
right click paste so yeah just paste it
into the page and if I publish this page
we can click view page to have a look at
it mm-hmm there we go they're both in in
roughly the right place okay so I hope
you found that useful
good luck setting up your maps with the
pins or whatever other images you fancy
doing a few other questions or comments
please link below and I will see you
soon

No comments: