In this video you'll add an interactive map to the website for a client that has a location.
We'll use a Google Maps again to easily embed a map on the Contact page and in the footer content area
of your brochure site businesses with a location need to let Web site visitors know exactly how to find
them and you'll be able to set them up professionally with these techniques.
Let's get started.
To embed a map on the Contact page what we'll do is put some contact information with the address that
we want the visitors to know and then we'll drop it in here below the title.
And above the contact form so that it sits in here a nice interactive map of the location.
So if we go to the dashboard and if the Google Maps plug in it's not already activated go ahead and
activate it and then roll over maps and let's look at maps this Google Maps plug in allows you to have
one map unless you upgrade to the Pro version.
But we only need one map on this.
And so you can configure this map for your purposes.
So let's go ahead and open up the one called My first map and take a look at the settings
and the default settings are fine to leave for now.
But it looks like we've got an indicator on this map that is California United States.
So I'll just get rid of that marker and I'm going to add another marker just right down here.
Put in a location with an address
click add marker and then I can go down here and I can use the mouse to zoom in and pan around until
I centered myself on the marker right where I want to be.
I want people to be able to find the location easily but also know where they are and be familiar with
it when they see it on the Contact page.
Great.
So as I've dragged the map around it's showing me the width at 100 percent for a responsive map and
that's what I want it to be sized for the persons screen.
Let's save the map
great you could see that it moved the zoom level to there that's where I had zoomed in.
Now that I have that map I have my marker at 35 front street and it gives me a short code just like
the contact for.
So if I copy the short code should be able to just open up the contact page and drop the map right in
when I want it to be
oh I'm excited let's open up the Web site contact page and once this is done loading I'll go ahead and
refresh it.
Nice.
So if I click on the marker it shows me the address.
It's an interactive map so I can zoom in and out I can locate the location.
I can also use the mouse zoom in and out.
And these are functions that you can either keep or limit using the plug in settings it's a little bit
close to the contact form they're going to put a little information below the map and above the contact
form to set it apart just a little bit.
And let's check the responsiveness to the screen size.
If I drag this screen from the array a little bit and make it narrower I can watch the say and how it
reacts to different screen sizes create that map is interactive and responsive
awesome.
Go ahead and make that map for any address you like on your own.
Contact me page and then separate the contact form from the map with a business name and address and
lay it out so that it looks good.
Puzzel video now and then I'll show you how I would do that.
How do you do.
Well if I were going to do that I would go back to the contact page and after the map but before the
contact form I would just enter a address
and then if you had shift enter it'll do a single line space instead of double line space.
When actually put another space in there and then how about a horizontal line there.
Now I'm going to go ahead and center that and make it larger.
Nice.
And I probably should announce this contact for
an update.
Let's take a look.
Nice
okay.
Now if we look at every page of the website there's a header there's a sidebar and there's two areas
left and right that are located above the footer that you can use that are widget areas in the 2016
theme.
What I'd like to do now is put a Google map into one of the widget areas and the name address and phone
number into the second widget area for the lower footer area.
Zagat on How'd that go.
Here's how I would do it.
I'm going to go back to the contact page and just grab the address and phone number because I'll be
using it there in the widget.
And then when they do this using the custom Mizer so that I can see what it's looking like as I go now
that the customizes opening I can go to the widget area content bottom one and two.
Let's go ahead and put a text widget into the content bottom one widget area.
Title it.
Find me.
Now inside of widgets you can only put text you can style it with HDMI now but the HTL mail that came
from the page on the Contact page up here didn't transfer over when I copied and pasted from the interior
page.
So it wasn't large if you remember this was heading to and it's centered so I could use some HVM l tags
like center
and close it with some tags and a slash in front of the command.
And if I have an entry here I can click automatically add paragraphs so it'll put a line break in.
Where I where I have line breaks and let's see what it looks like if I put a heading to for the phone
number but not for the address
OK.
Now this is going to be on the left side.
If I use content bottom two because it's left and right.
You know I think I'll use heading to for the address as well.
So I'll just check this heading to tag.
Cut it and pasted right there
nice and hopefully that won't be too wide.
You know what I could actually put a carriage return in there after Front Street.
And I won't need the comma.
There we go.
That's going to be a nice block of text.
So if I have that on current can contact but I'm too for current applicants at bottom one rather in
content bottom two loops.
I mean at one of my maps so the Google Maps plug in provides some widgets and it was the ID one that
was my only map I had
I can have a title so that it matches
nice and you could see it's responsive to the area of the widget.
And then there's the address.
So let's take a look at it say on the home page because those content areas at the footer of the Web
site show just like the header and the sidebar on every page of the Web site great.
So if somebody scroll to the bottom of any page of the website they'll be able to get the contact info
and an interactive map if they like.
So that's what the home page looks like.
And so if we go to the About page
great there is that footer area nicely done.
Now something you may have noticed is that on the Contact page where we have our map embedded if you
scroll down to the footer the map is not shown in two places on the same page.
Also in terms of the plug in that we're using right here you're only allowed one map unless you upgrade
to the Pro version.
So I've done a little research and I've moved over to this W.P. Google map plug in here by flipper code
installed it and found it to be a little bit more user friendly and it has the ability to create more
than one map and embed more than one location marker on each map.
I've already installed and activated the plug in and I'll show you some of the differences and how I
was able to make it set up a little bit better for our purposes I think.
So you had a location separately from a map and then you can manage locations and manage maps.
The first thing I did was added a location with our address.
I called it fire weed photography.
But if I go in and edit it you can see how this plugin works.
And it also has a nice feature where you can display the info window message above the marker with whatever
you like there and you can have it by default open when the map opens.
So that's what I placed here.
I checked the info window the fall open box and then I saved my location.
Then I added a map.
So let's go ahead and manage maps
across the map.
The same thing.
And here are some of my settings.
I did have to experiment a little bit and choose a zoom level between 1 and 19 by saving the map and
embedding it on the Contact page and then going back and looking at my zoom level 15 is what I settled
on and I made the map the same amount of pixels high as we had before.
And it says right here you leave it blank for the map with to leave it 100 percent which would make
it responsive to any screen size.
So then there's a lot of other options turning on and off options and controls for the user.
But then I just save the map and once you save the map and you go to your managed maps page you can
see the short code right here that needs to be embedded on the page or the widget.
So I'm getting Control-C to copy that and then I'll go to the contact me page open it up and replace
the old short code with the new.
Now here's what the contact page looks like.
You can see that I don't have a marker but if I click on it there's where I get my marker information
and the map is zoom mobile as well as draggle.
So let's replace the shortcut
with the new one.
Update the page and take a look as we refresh the contact me page
nice that looks a lot better to me it already has the info graphic up there.
It also provides a little bit more space between the map and the information down below.
And now the old map is now able to be embedded down here.
But I thought of another change we might make and the ability to have a second map within our system
will be useful here.
I'd like this map to be maybe 200 pixels tall instead of 400 so that the sizing and the footer here
looks good.
So let's go back and create a new map under WP Google map.
This one I'm going to call
fire weed footer so I can differentiate it 100 percent with this time.
I'm going to make it 200 pixels in height.
Let's go to the same zoom level
and I'm actually going to use the same location on this map.
And now all I have to do is go to manage my maps and find the short code for this one which I called
fire weed footer right over here.
Copy that and then paste it into the widget area this time other appearance widgets will look at content
bottom to.
Now if you remember I dragged in the WP Google map right here and I'm going to go ahead and just drag
it back over here and deactivate that widget and the new plugin offers us a widget as well.
And I mean to select the fire we'd foot or map
title that map and click save in the widget.
Let's go back and refresh the page
nice.
That looks much better and we can display both maps on the same page and review if I click about the
map on the footer appears on every page of the Web site.
And now I think it's laid out just a little bit better.
The last thing I'm going to do is go ahead and keep my word press installation clean by going back into
plug ins.
Install plug ins deactivating and then deleting that plug in.
Let's see it's W.P. Google Maps.
Not by flipper code but by W.P. Google Maps.
First you need to deactivate a plug in before you're able to delete it.
Once you delete inside the Wordpress dashboard it'll give you a confirmation message.
Yes delete these files.
Great.
Now my installation is all cleaned up.
And we've inserted some nice maps into our website.
In this video you've configured a Google map to display an interactive location map to visitors of the
site you embedded the map into the contact page as well as setting up two footer areas for location
information.
In the next video we'll set up the Google Analytics plug in to begin tracking activity on the Web site
and also to display the stats on the dashboard.